1 | import * as i0 from '@angular/core';
|
2 | import { InjectionToken, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, Directive, NgModule } from '@angular/core';
|
3 | import { setLines, MatLine, MatLineModule, MatCommonModule } from '@angular/material/core';
|
4 | import { coerceNumberProperty } from '@angular/cdk/coercion';
|
5 | import * as i1 from '@angular/cdk/bidi';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | class TileCoordinator {
|
32 | constructor() {
|
33 |
|
34 | this.columnIndex = 0;
|
35 |
|
36 | this.rowIndex = 0;
|
37 | }
|
38 |
|
39 | get rowCount() {
|
40 | return this.rowIndex + 1;
|
41 | }
|
42 | |
43 |
|
44 |
|
45 |
|
46 | get rowspan() {
|
47 | const lastRowMax = Math.max(...this.tracker);
|
48 |
|
49 |
|
50 | return lastRowMax > 1 ? this.rowCount + lastRowMax - 1 : this.rowCount;
|
51 | }
|
52 | |
53 |
|
54 |
|
55 |
|
56 |
|
57 | update(numColumns, tiles) {
|
58 | this.columnIndex = 0;
|
59 | this.rowIndex = 0;
|
60 | this.tracker = new Array(numColumns);
|
61 | this.tracker.fill(0, 0, this.tracker.length);
|
62 | this.positions = tiles.map(tile => this._trackTile(tile));
|
63 | }
|
64 |
|
65 | _trackTile(tile) {
|
66 |
|
67 | const gapStartIndex = this._findMatchingGap(tile.colspan);
|
68 |
|
69 | this._markTilePosition(gapStartIndex, tile);
|
70 |
|
71 |
|
72 | this.columnIndex = gapStartIndex + tile.colspan;
|
73 | return new TilePosition(this.rowIndex, gapStartIndex);
|
74 | }
|
75 |
|
76 | _findMatchingGap(tileCols) {
|
77 | if (tileCols > this.tracker.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
78 | throw Error(`mat-grid-list: tile with colspan ${tileCols} is wider than ` +
|
79 | `grid with cols="${this.tracker.length}".`);
|
80 | }
|
81 |
|
82 | let gapStartIndex = -1;
|
83 | let gapEndIndex = -1;
|
84 |
|
85 | do {
|
86 |
|
87 | if (this.columnIndex + tileCols > this.tracker.length) {
|
88 | this._nextRow();
|
89 | gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
|
90 | gapEndIndex = this._findGapEndIndex(gapStartIndex);
|
91 | continue;
|
92 | }
|
93 | gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
|
94 |
|
95 | if (gapStartIndex == -1) {
|
96 | this._nextRow();
|
97 | gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
|
98 | gapEndIndex = this._findGapEndIndex(gapStartIndex);
|
99 | continue;
|
100 | }
|
101 | gapEndIndex = this._findGapEndIndex(gapStartIndex);
|
102 |
|
103 |
|
104 | this.columnIndex = gapStartIndex + 1;
|
105 |
|
106 |
|
107 | } while (gapEndIndex - gapStartIndex < tileCols || gapEndIndex == 0);
|
108 |
|
109 |
|
110 | return Math.max(gapStartIndex, 0);
|
111 | }
|
112 |
|
113 | _nextRow() {
|
114 | this.columnIndex = 0;
|
115 | this.rowIndex++;
|
116 |
|
117 | for (let i = 0; i < this.tracker.length; i++) {
|
118 | this.tracker[i] = Math.max(0, this.tracker[i] - 1);
|
119 | }
|
120 | }
|
121 | |
122 |
|
123 |
|
124 |
|
125 | _findGapEndIndex(gapStartIndex) {
|
126 | for (let i = gapStartIndex + 1; i < this.tracker.length; i++) {
|
127 | if (this.tracker[i] != 0) {
|
128 | return i;
|
129 | }
|
130 | }
|
131 |
|
132 | return this.tracker.length;
|
133 | }
|
134 |
|
135 | _markTilePosition(start, tile) {
|
136 | for (let i = 0; i < tile.colspan; i++) {
|
137 | this.tracker[start + i] = tile.rowspan;
|
138 | }
|
139 | }
|
140 | }
|
141 |
|
142 |
|
143 |
|
144 |
|
145 | class TilePosition {
|
146 | constructor(row, col) {
|
147 | this.row = row;
|
148 | this.col = col;
|
149 | }
|
150 | }
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 | const MAT_GRID_LIST = new InjectionToken('MAT_GRID_LIST');
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 | class MatGridTile {
|
173 | constructor(_element, _gridList) {
|
174 | this._element = _element;
|
175 | this._gridList = _gridList;
|
176 | this._rowspan = 1;
|
177 | this._colspan = 1;
|
178 | }
|
179 |
|
180 | get rowspan() {
|
181 | return this._rowspan;
|
182 | }
|
183 | set rowspan(value) {
|
184 | this._rowspan = Math.round(coerceNumberProperty(value));
|
185 | }
|
186 |
|
187 | get colspan() {
|
188 | return this._colspan;
|
189 | }
|
190 | set colspan(value) {
|
191 | this._colspan = Math.round(coerceNumberProperty(value));
|
192 | }
|
193 | |
194 |
|
195 |
|
196 |
|
197 | _setStyle(property, value) {
|
198 | this._element.nativeElement.style[property] = value;
|
199 | }
|
200 | }
|
201 | MatGridTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTile, deps: [{ token: i0.ElementRef }, { token: MAT_GRID_LIST, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
202 | MatGridTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: MatGridTile, selector: "mat-grid-tile", inputs: { rowspan: "rowspan", colspan: "colspan" }, host: { properties: { "attr.rowspan": "rowspan", "attr.colspan": "colspan" }, classAttribute: "mat-grid-tile" }, exportAs: ["matGridTile"], ngImport: i0, template: "<div class=\"mat-grid-tile-content\">\n <ng-content></ng-content>\n</div>\n", 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}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
203 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTile, decorators: [{
|
204 | type: Component,
|
205 | args: [{ selector: 'mat-grid-tile', exportAs: 'matGridTile', host: {
|
206 | 'class': 'mat-grid-tile',
|
207 |
|
208 |
|
209 | '[attr.rowspan]': 'rowspan',
|
210 | '[attr.colspan]': 'colspan',
|
211 | }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mat-grid-tile-content\">\n <ng-content></ng-content>\n</div>\n", 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}"] }]
|
212 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
213 | type: Optional
|
214 | }, {
|
215 | type: Inject,
|
216 | args: [MAT_GRID_LIST]
|
217 | }] }]; }, propDecorators: { rowspan: [{
|
218 | type: Input
|
219 | }], colspan: [{
|
220 | type: Input
|
221 | }] } });
|
222 | class MatGridTileText {
|
223 | constructor(_element) {
|
224 | this._element = _element;
|
225 | }
|
226 | ngAfterContentInit() {
|
227 | setLines(this._lines, this._element);
|
228 | }
|
229 | }
|
230 | MatGridTileText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileText, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
231 | MatGridTileText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer", queries: [{ propertyName: "_lines", predicate: MatLine, descendants: true }], ngImport: i0, 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", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
232 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileText, decorators: [{
|
233 | type: Component,
|
234 | args: [{ selector: 'mat-grid-tile-header, mat-grid-tile-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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" }]
|
235 | }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _lines: [{
|
236 | type: ContentChildren,
|
237 | args: [MatLine, { descendants: true }]
|
238 | }] } });
|
239 |
|
240 |
|
241 |
|
242 |
|
243 | class MatGridAvatarCssMatStyler {
|
244 | }
|
245 | MatGridAvatarCssMatStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridAvatarCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
246 | MatGridAvatarCssMatStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatGridAvatarCssMatStyler, selector: "[mat-grid-avatar], [matGridAvatar]", host: { classAttribute: "mat-grid-avatar" }, ngImport: i0 });
|
247 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridAvatarCssMatStyler, decorators: [{
|
248 | type: Directive,
|
249 | args: [{
|
250 | selector: '[mat-grid-avatar], [matGridAvatar]',
|
251 | host: { 'class': 'mat-grid-avatar' },
|
252 | }]
|
253 | }] });
|
254 |
|
255 |
|
256 |
|
257 |
|
258 | class MatGridTileHeaderCssMatStyler {
|
259 | }
|
260 | MatGridTileHeaderCssMatStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileHeaderCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
261 | MatGridTileHeaderCssMatStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header", host: { classAttribute: "mat-grid-tile-header" }, ngImport: i0 });
|
262 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileHeaderCssMatStyler, decorators: [{
|
263 | type: Directive,
|
264 | args: [{
|
265 | selector: 'mat-grid-tile-header',
|
266 | host: { 'class': 'mat-grid-tile-header' },
|
267 | }]
|
268 | }] });
|
269 |
|
270 |
|
271 |
|
272 |
|
273 | class MatGridTileFooterCssMatStyler {
|
274 | }
|
275 | MatGridTileFooterCssMatStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileFooterCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
276 | MatGridTileFooterCssMatStyler.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: MatGridTileFooterCssMatStyler, selector: "mat-grid-tile-footer", host: { classAttribute: "mat-grid-tile-footer" }, ngImport: i0 });
|
277 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileFooterCssMatStyler, decorators: [{
|
278 | type: Directive,
|
279 | args: [{
|
280 | selector: 'mat-grid-tile-footer',
|
281 | host: { 'class': 'mat-grid-tile-footer' },
|
282 | }]
|
283 | }] });
|
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 |
|
292 |
|
293 |
|
294 |
|
295 |
|
296 | const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 | class TileStyler {
|
303 | constructor() {
|
304 | this._rows = 0;
|
305 | this._rowspan = 0;
|
306 | }
|
307 | |
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 | init(gutterSize, tracker, cols, direction) {
|
317 | this._gutterSize = normalizeUnits(gutterSize);
|
318 | this._rows = tracker.rowCount;
|
319 | this._rowspan = tracker.rowspan;
|
320 | this._cols = cols;
|
321 | this._direction = direction;
|
322 | }
|
323 | |
324 |
|
325 |
|
326 |
|
327 |
|
328 |
|
329 |
|
330 | getBaseTileSize(sizePercent, gutterFraction) {
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 | return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
|
337 | }
|
338 | |
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 | getTilePosition(baseSize, offset) {
|
345 |
|
346 |
|
347 | return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
|
348 | }
|
349 | |
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 | getTileSize(baseSize, span) {
|
356 | return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;
|
357 | }
|
358 | |
359 |
|
360 |
|
361 |
|
362 |
|
363 |
|
364 | setStyle(tile, rowIndex, colIndex) {
|
365 |
|
366 | let percentWidthPerTile = 100 / this._cols;
|
367 |
|
368 |
|
369 | let gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
|
370 | this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
|
371 | this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
|
372 | }
|
373 |
|
374 | setColStyles(tile, colIndex, percentWidth, gutterWidth) {
|
375 |
|
376 | let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
|
377 |
|
378 |
|
379 | let side = this._direction === 'rtl' ? 'right' : 'left';
|
380 | tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
|
381 | tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
|
382 | }
|
383 | |
384 |
|
385 |
|
386 | getGutterSpan() {
|
387 | return `${this._gutterSize} * (${this._rowspan} - 1)`;
|
388 | }
|
389 | |
390 |
|
391 |
|
392 |
|
393 | getTileSpan(tileHeight) {
|
394 | return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;
|
395 | }
|
396 | |
397 |
|
398 |
|
399 |
|
400 |
|
401 | getComputedHeight() {
|
402 | return null;
|
403 | }
|
404 | }
|
405 |
|
406 |
|
407 |
|
408 |
|
409 |
|
410 | class FixedTileStyler extends TileStyler {
|
411 | constructor(fixedRowHeight) {
|
412 | super();
|
413 | this.fixedRowHeight = fixedRowHeight;
|
414 | }
|
415 | init(gutterSize, tracker, cols, direction) {
|
416 | super.init(gutterSize, tracker, cols, direction);
|
417 | this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
|
418 | if (!cssCalcAllowedValue.test(this.fixedRowHeight) &&
|
419 | (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
420 | throw Error(`Invalid value "${this.fixedRowHeight}" set as rowHeight.`);
|
421 | }
|
422 | }
|
423 | setRowStyles(tile, rowIndex) {
|
424 | tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
|
425 | tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
|
426 | }
|
427 | getComputedHeight() {
|
428 | return ['height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)];
|
429 | }
|
430 | reset(list) {
|
431 | list._setListStyle(['height', null]);
|
432 | if (list._tiles) {
|
433 | list._tiles.forEach(tile => {
|
434 | tile._setStyle('top', null);
|
435 | tile._setStyle('height', null);
|
436 | });
|
437 | }
|
438 | }
|
439 | }
|
440 |
|
441 |
|
442 |
|
443 |
|
444 |
|
445 | class RatioTileStyler extends TileStyler {
|
446 | constructor(value) {
|
447 | super();
|
448 | this._parseRatio(value);
|
449 | }
|
450 | setRowStyles(tile, rowIndex, percentWidth, gutterWidth) {
|
451 | let percentHeightPerTile = percentWidth / this.rowHeightRatio;
|
452 | this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
|
453 |
|
454 |
|
455 |
|
456 | tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
|
457 | tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
|
458 | }
|
459 | getComputedHeight() {
|
460 | return [
|
461 | 'paddingBottom',
|
462 | calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`),
|
463 | ];
|
464 | }
|
465 | reset(list) {
|
466 | list._setListStyle(['paddingBottom', null]);
|
467 | list._tiles.forEach(tile => {
|
468 | tile._setStyle('marginTop', null);
|
469 | tile._setStyle('paddingTop', null);
|
470 | });
|
471 | }
|
472 | _parseRatio(value) {
|
473 | const ratioParts = value.split(':');
|
474 | if (ratioParts.length !== 2 && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
475 | throw Error(`mat-grid-list: invalid ratio given for row-height: "${value}"`);
|
476 | }
|
477 | this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
|
478 | }
|
479 | }
|
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 | class FitTileStyler extends TileStyler {
|
488 | setRowStyles(tile, rowIndex) {
|
489 |
|
490 | let percentHeightPerTile = 100 / this._rowspan;
|
491 |
|
492 | let gutterHeightPerTile = (this._rows - 1) / this._rows;
|
493 |
|
494 | let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
|
495 | tile._setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
|
496 | tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
|
497 | }
|
498 | reset(list) {
|
499 | if (list._tiles) {
|
500 | list._tiles.forEach(tile => {
|
501 | tile._setStyle('top', null);
|
502 | tile._setStyle('height', null);
|
503 | });
|
504 | }
|
505 | }
|
506 | }
|
507 |
|
508 | function calc(exp) {
|
509 | return `calc(${exp})`;
|
510 | }
|
511 |
|
512 | function normalizeUnits(value) {
|
513 | return value.match(/([A-Za-z%]+)$/) ? value : `${value}px`;
|
514 | }
|
515 |
|
516 |
|
517 |
|
518 |
|
519 |
|
520 |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 | const MAT_FIT_MODE = 'fit';
|
527 | class MatGridList {
|
528 | constructor(_element, _dir) {
|
529 | this._element = _element;
|
530 | this._dir = _dir;
|
531 |
|
532 | this._gutter = '1px';
|
533 | }
|
534 |
|
535 | get cols() {
|
536 | return this._cols;
|
537 | }
|
538 | set cols(value) {
|
539 | this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
|
540 | }
|
541 |
|
542 | get gutterSize() {
|
543 | return this._gutter;
|
544 | }
|
545 | set gutterSize(value) {
|
546 | this._gutter = `${value == null ? '' : value}`;
|
547 | }
|
548 |
|
549 | get rowHeight() {
|
550 | return this._rowHeight;
|
551 | }
|
552 | set rowHeight(value) {
|
553 | const newValue = `${value == null ? '' : value}`;
|
554 | if (newValue !== this._rowHeight) {
|
555 | this._rowHeight = newValue;
|
556 | this._setTileStyler(this._rowHeight);
|
557 | }
|
558 | }
|
559 | ngOnInit() {
|
560 | this._checkCols();
|
561 | this._checkRowHeight();
|
562 | }
|
563 | |
564 |
|
565 |
|
566 |
|
567 | ngAfterContentChecked() {
|
568 | this._layoutTiles();
|
569 | }
|
570 |
|
571 | _checkCols() {
|
572 | if (!this.cols && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
573 | throw Error(`mat-grid-list: must pass in number of columns. ` + `Example: <mat-grid-list cols="3">`);
|
574 | }
|
575 | }
|
576 |
|
577 | _checkRowHeight() {
|
578 | if (!this._rowHeight) {
|
579 | this._setTileStyler('1:1');
|
580 | }
|
581 | }
|
582 |
|
583 | _setTileStyler(rowHeight) {
|
584 | if (this._tileStyler) {
|
585 | this._tileStyler.reset(this);
|
586 | }
|
587 | if (rowHeight === MAT_FIT_MODE) {
|
588 | this._tileStyler = new FitTileStyler();
|
589 | }
|
590 | else if (rowHeight && rowHeight.indexOf(':') > -1) {
|
591 | this._tileStyler = new RatioTileStyler(rowHeight);
|
592 | }
|
593 | else {
|
594 | this._tileStyler = new FixedTileStyler(rowHeight);
|
595 | }
|
596 | }
|
597 |
|
598 | _layoutTiles() {
|
599 | if (!this._tileCoordinator) {
|
600 | this._tileCoordinator = new TileCoordinator();
|
601 | }
|
602 | const tracker = this._tileCoordinator;
|
603 | const tiles = this._tiles.filter(tile => !tile._gridList || tile._gridList === this);
|
604 | const direction = this._dir ? this._dir.value : 'ltr';
|
605 | this._tileCoordinator.update(this.cols, tiles);
|
606 | this._tileStyler.init(this.gutterSize, tracker, this.cols, direction);
|
607 | tiles.forEach((tile, index) => {
|
608 | const pos = tracker.positions[index];
|
609 | this._tileStyler.setStyle(tile, pos.row, pos.col);
|
610 | });
|
611 | this._setListStyle(this._tileStyler.getComputedHeight());
|
612 | }
|
613 |
|
614 | _setListStyle(style) {
|
615 | if (style) {
|
616 | this._element.nativeElement.style[style[0]] = style[1];
|
617 | }
|
618 | }
|
619 | }
|
620 | MatGridList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridList, deps: [{ token: i0.ElementRef }, { token: i1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
621 | MatGridList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: MatGridList, selector: "mat-grid-list", inputs: { cols: "cols", gutterSize: "gutterSize", rowHeight: "rowHeight" }, host: { properties: { "attr.cols": "cols" }, classAttribute: "mat-grid-list" }, providers: [
|
622 | {
|
623 | provide: MAT_GRID_LIST,
|
624 | useExisting: MatGridList,
|
625 | },
|
626 | ], queries: [{ propertyName: "_tiles", predicate: MatGridTile, descendants: true }], exportAs: ["matGridList"], ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>", 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}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
627 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridList, decorators: [{
|
628 | type: Component,
|
629 | args: [{ selector: 'mat-grid-list', exportAs: 'matGridList', host: {
|
630 | 'class': 'mat-grid-list',
|
631 |
|
632 |
|
633 | '[attr.cols]': 'cols',
|
634 | }, providers: [
|
635 | {
|
636 | provide: MAT_GRID_LIST,
|
637 | useExisting: MatGridList,
|
638 | },
|
639 | ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n <ng-content></ng-content>\n</div>", 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}"] }]
|
640 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Directionality, decorators: [{
|
641 | type: Optional
|
642 | }] }]; }, propDecorators: { _tiles: [{
|
643 | type: ContentChildren,
|
644 | args: [MatGridTile, { descendants: true }]
|
645 | }], cols: [{
|
646 | type: Input
|
647 | }], gutterSize: [{
|
648 | type: Input
|
649 | }], rowHeight: [{
|
650 | type: Input
|
651 | }] } });
|
652 |
|
653 |
|
654 |
|
655 |
|
656 |
|
657 |
|
658 |
|
659 |
|
660 | class MatGridListModule {
|
661 | }
|
662 | MatGridListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
663 | MatGridListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, declarations: [MatGridList,
|
664 | MatGridTile,
|
665 | MatGridTileText,
|
666 | MatGridTileHeaderCssMatStyler,
|
667 | MatGridTileFooterCssMatStyler,
|
668 | MatGridAvatarCssMatStyler], imports: [MatLineModule, MatCommonModule], exports: [MatGridList,
|
669 | MatGridTile,
|
670 | MatGridTileText,
|
671 | MatLineModule,
|
672 | MatCommonModule,
|
673 | MatGridTileHeaderCssMatStyler,
|
674 | MatGridTileFooterCssMatStyler,
|
675 | MatGridAvatarCssMatStyler] });
|
676 | MatGridListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, imports: [MatLineModule, MatCommonModule, MatLineModule,
|
677 | MatCommonModule] });
|
678 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, decorators: [{
|
679 | type: NgModule,
|
680 | args: [{
|
681 | imports: [MatLineModule, MatCommonModule],
|
682 | exports: [
|
683 | MatGridList,
|
684 | MatGridTile,
|
685 | MatGridTileText,
|
686 | MatLineModule,
|
687 | MatCommonModule,
|
688 | MatGridTileHeaderCssMatStyler,
|
689 | MatGridTileFooterCssMatStyler,
|
690 | MatGridAvatarCssMatStyler,
|
691 | ],
|
692 | declarations: [
|
693 | MatGridList,
|
694 | MatGridTile,
|
695 | MatGridTileText,
|
696 | MatGridTileHeaderCssMatStyler,
|
697 | MatGridTileFooterCssMatStyler,
|
698 | MatGridAvatarCssMatStyler,
|
699 | ],
|
700 | }]
|
701 | }] });
|
702 |
|
703 |
|
704 |
|
705 |
|
706 |
|
707 |
|
708 |
|
709 |
|
710 |
|
711 | const ɵTileCoordinator = TileCoordinator;
|
712 |
|
713 |
|
714 |
|
715 |
|
716 |
|
717 |
|
718 |
|
719 |
|
720 |
|
721 |
|
722 |
|
723 |
|
724 |
|
725 | export { MatGridAvatarCssMatStyler, MatGridList, MatGridListModule, MatGridTile, MatGridTileFooterCssMatStyler, MatGridTileHeaderCssMatStyler, MatGridTileText, ɵTileCoordinator };
|
726 |
|