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 () {
|
213 | return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
214 | type: Optional
|
215 | }, {
|
216 | type: Inject,
|
217 | args: [MAT_GRID_LIST]
|
218 | }] }];
|
219 | }, propDecorators: { rowspan: [{
|
220 | type: Input
|
221 | }], colspan: [{
|
222 | type: Input
|
223 | }] } });
|
224 | class MatGridTileText {
|
225 | constructor(_element) {
|
226 | this._element = _element;
|
227 | }
|
228 | ngAfterContentInit() {
|
229 | setLines(this._lines, this._element);
|
230 | }
|
231 | }
|
232 | MatGridTileText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileText, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
233 | 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 });
|
234 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileText, decorators: [{
|
235 | type: Component,
|
236 | 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" }]
|
237 | }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _lines: [{
|
238 | type: ContentChildren,
|
239 | args: [MatLine, { descendants: true }]
|
240 | }] } });
|
241 |
|
242 |
|
243 |
|
244 |
|
245 | class MatGridAvatarCssMatStyler {
|
246 | }
|
247 | MatGridAvatarCssMatStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridAvatarCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
248 | 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 });
|
249 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridAvatarCssMatStyler, decorators: [{
|
250 | type: Directive,
|
251 | args: [{
|
252 | selector: '[mat-grid-avatar], [matGridAvatar]',
|
253 | host: { 'class': 'mat-grid-avatar' },
|
254 | }]
|
255 | }] });
|
256 |
|
257 |
|
258 |
|
259 |
|
260 | class MatGridTileHeaderCssMatStyler {
|
261 | }
|
262 | MatGridTileHeaderCssMatStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileHeaderCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
263 | 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 });
|
264 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileHeaderCssMatStyler, decorators: [{
|
265 | type: Directive,
|
266 | args: [{
|
267 | selector: 'mat-grid-tile-header',
|
268 | host: { 'class': 'mat-grid-tile-header' },
|
269 | }]
|
270 | }] });
|
271 |
|
272 |
|
273 |
|
274 |
|
275 | class MatGridTileFooterCssMatStyler {
|
276 | }
|
277 | MatGridTileFooterCssMatStyler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileFooterCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
278 | 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 });
|
279 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridTileFooterCssMatStyler, decorators: [{
|
280 | type: Directive,
|
281 | args: [{
|
282 | selector: 'mat-grid-tile-footer',
|
283 | host: { 'class': 'mat-grid-tile-footer' },
|
284 | }]
|
285 | }] });
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 |
|
292 |
|
293 |
|
294 |
|
295 |
|
296 |
|
297 |
|
298 | const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 | class TileStyler {
|
305 | constructor() {
|
306 | this._rows = 0;
|
307 | this._rowspan = 0;
|
308 | }
|
309 | |
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 | init(gutterSize, tracker, cols, direction) {
|
319 | this._gutterSize = normalizeUnits(gutterSize);
|
320 | this._rows = tracker.rowCount;
|
321 | this._rowspan = tracker.rowspan;
|
322 | this._cols = cols;
|
323 | this._direction = direction;
|
324 | }
|
325 | |
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 | getBaseTileSize(sizePercent, gutterFraction) {
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 | return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
|
339 | }
|
340 | |
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 | getTilePosition(baseSize, offset) {
|
347 |
|
348 |
|
349 | return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
|
350 | }
|
351 | |
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 | getTileSize(baseSize, span) {
|
358 | return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;
|
359 | }
|
360 | |
361 |
|
362 |
|
363 |
|
364 |
|
365 |
|
366 | setStyle(tile, rowIndex, colIndex) {
|
367 |
|
368 | let percentWidthPerTile = 100 / this._cols;
|
369 |
|
370 |
|
371 | let gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
|
372 | this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
|
373 | this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
|
374 | }
|
375 |
|
376 | setColStyles(tile, colIndex, percentWidth, gutterWidth) {
|
377 |
|
378 | let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
|
379 |
|
380 |
|
381 | let side = this._direction === 'rtl' ? 'right' : 'left';
|
382 | tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
|
383 | tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
|
384 | }
|
385 | |
386 |
|
387 |
|
388 | getGutterSpan() {
|
389 | return `${this._gutterSize} * (${this._rowspan} - 1)`;
|
390 | }
|
391 | |
392 |
|
393 |
|
394 |
|
395 | getTileSpan(tileHeight) {
|
396 | return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;
|
397 | }
|
398 | |
399 |
|
400 |
|
401 |
|
402 |
|
403 | getComputedHeight() {
|
404 | return null;
|
405 | }
|
406 | }
|
407 |
|
408 |
|
409 |
|
410 |
|
411 |
|
412 | class FixedTileStyler extends TileStyler {
|
413 | constructor(fixedRowHeight) {
|
414 | super();
|
415 | this.fixedRowHeight = fixedRowHeight;
|
416 | }
|
417 | init(gutterSize, tracker, cols, direction) {
|
418 | super.init(gutterSize, tracker, cols, direction);
|
419 | this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
|
420 | if (!cssCalcAllowedValue.test(this.fixedRowHeight) &&
|
421 | (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
422 | throw Error(`Invalid value "${this.fixedRowHeight}" set as rowHeight.`);
|
423 | }
|
424 | }
|
425 | setRowStyles(tile, rowIndex) {
|
426 | tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
|
427 | tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
|
428 | }
|
429 | getComputedHeight() {
|
430 | return ['height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)];
|
431 | }
|
432 | reset(list) {
|
433 | list._setListStyle(['height', null]);
|
434 | if (list._tiles) {
|
435 | list._tiles.forEach(tile => {
|
436 | tile._setStyle('top', null);
|
437 | tile._setStyle('height', null);
|
438 | });
|
439 | }
|
440 | }
|
441 | }
|
442 |
|
443 |
|
444 |
|
445 |
|
446 |
|
447 | class RatioTileStyler extends TileStyler {
|
448 | constructor(value) {
|
449 | super();
|
450 | this._parseRatio(value);
|
451 | }
|
452 | setRowStyles(tile, rowIndex, percentWidth, gutterWidth) {
|
453 | let percentHeightPerTile = percentWidth / this.rowHeightRatio;
|
454 | this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
|
455 |
|
456 |
|
457 |
|
458 | tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
|
459 | tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
|
460 | }
|
461 | getComputedHeight() {
|
462 | return [
|
463 | 'paddingBottom',
|
464 | calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`),
|
465 | ];
|
466 | }
|
467 | reset(list) {
|
468 | list._setListStyle(['paddingBottom', null]);
|
469 | list._tiles.forEach(tile => {
|
470 | tile._setStyle('marginTop', null);
|
471 | tile._setStyle('paddingTop', null);
|
472 | });
|
473 | }
|
474 | _parseRatio(value) {
|
475 | const ratioParts = value.split(':');
|
476 | if (ratioParts.length !== 2 && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
477 | throw Error(`mat-grid-list: invalid ratio given for row-height: "${value}"`);
|
478 | }
|
479 | this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
|
480 | }
|
481 | }
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 |
|
488 |
|
489 | class FitTileStyler extends TileStyler {
|
490 | setRowStyles(tile, rowIndex) {
|
491 |
|
492 | let percentHeightPerTile = 100 / this._rowspan;
|
493 |
|
494 | let gutterHeightPerTile = (this._rows - 1) / this._rows;
|
495 |
|
496 | let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
|
497 | tile._setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
|
498 | tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
|
499 | }
|
500 | reset(list) {
|
501 | if (list._tiles) {
|
502 | list._tiles.forEach(tile => {
|
503 | tile._setStyle('top', null);
|
504 | tile._setStyle('height', null);
|
505 | });
|
506 | }
|
507 | }
|
508 | }
|
509 |
|
510 | function calc(exp) {
|
511 | return `calc(${exp})`;
|
512 | }
|
513 |
|
514 | function normalizeUnits(value) {
|
515 | return value.match(/([A-Za-z%]+)$/) ? value : `${value}px`;
|
516 | }
|
517 |
|
518 |
|
519 |
|
520 |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 |
|
527 |
|
528 | const MAT_FIT_MODE = 'fit';
|
529 | class MatGridList {
|
530 | constructor(_element, _dir) {
|
531 | this._element = _element;
|
532 | this._dir = _dir;
|
533 |
|
534 | this._gutter = '1px';
|
535 | }
|
536 |
|
537 | get cols() {
|
538 | return this._cols;
|
539 | }
|
540 | set cols(value) {
|
541 | this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
|
542 | }
|
543 |
|
544 | get gutterSize() {
|
545 | return this._gutter;
|
546 | }
|
547 | set gutterSize(value) {
|
548 | this._gutter = `${value == null ? '' : value}`;
|
549 | }
|
550 |
|
551 | get rowHeight() {
|
552 | return this._rowHeight;
|
553 | }
|
554 | set rowHeight(value) {
|
555 | const newValue = `${value == null ? '' : value}`;
|
556 | if (newValue !== this._rowHeight) {
|
557 | this._rowHeight = newValue;
|
558 | this._setTileStyler(this._rowHeight);
|
559 | }
|
560 | }
|
561 | ngOnInit() {
|
562 | this._checkCols();
|
563 | this._checkRowHeight();
|
564 | }
|
565 | |
566 |
|
567 |
|
568 |
|
569 | ngAfterContentChecked() {
|
570 | this._layoutTiles();
|
571 | }
|
572 |
|
573 | _checkCols() {
|
574 | if (!this.cols && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
575 | throw Error(`mat-grid-list: must pass in number of columns. ` + `Example: <mat-grid-list cols="3">`);
|
576 | }
|
577 | }
|
578 |
|
579 | _checkRowHeight() {
|
580 | if (!this._rowHeight) {
|
581 | this._setTileStyler('1:1');
|
582 | }
|
583 | }
|
584 |
|
585 | _setTileStyler(rowHeight) {
|
586 | if (this._tileStyler) {
|
587 | this._tileStyler.reset(this);
|
588 | }
|
589 | if (rowHeight === MAT_FIT_MODE) {
|
590 | this._tileStyler = new FitTileStyler();
|
591 | }
|
592 | else if (rowHeight && rowHeight.indexOf(':') > -1) {
|
593 | this._tileStyler = new RatioTileStyler(rowHeight);
|
594 | }
|
595 | else {
|
596 | this._tileStyler = new FixedTileStyler(rowHeight);
|
597 | }
|
598 | }
|
599 |
|
600 | _layoutTiles() {
|
601 | if (!this._tileCoordinator) {
|
602 | this._tileCoordinator = new TileCoordinator();
|
603 | }
|
604 | const tracker = this._tileCoordinator;
|
605 | const tiles = this._tiles.filter(tile => !tile._gridList || tile._gridList === this);
|
606 | const direction = this._dir ? this._dir.value : 'ltr';
|
607 | this._tileCoordinator.update(this.cols, tiles);
|
608 | this._tileStyler.init(this.gutterSize, tracker, this.cols, direction);
|
609 | tiles.forEach((tile, index) => {
|
610 | const pos = tracker.positions[index];
|
611 | this._tileStyler.setStyle(tile, pos.row, pos.col);
|
612 | });
|
613 | this._setListStyle(this._tileStyler.getComputedHeight());
|
614 | }
|
615 |
|
616 | _setListStyle(style) {
|
617 | if (style) {
|
618 | this._element.nativeElement.style[style[0]] = style[1];
|
619 | }
|
620 | }
|
621 | }
|
622 | 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 });
|
623 | 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: [
|
624 | {
|
625 | provide: MAT_GRID_LIST,
|
626 | useExisting: MatGridList,
|
627 | },
|
628 | ], 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 });
|
629 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridList, decorators: [{
|
630 | type: Component,
|
631 | args: [{ selector: 'mat-grid-list', exportAs: 'matGridList', host: {
|
632 | 'class': 'mat-grid-list',
|
633 |
|
634 |
|
635 | '[attr.cols]': 'cols',
|
636 | }, providers: [
|
637 | {
|
638 | provide: MAT_GRID_LIST,
|
639 | useExisting: MatGridList,
|
640 | },
|
641 | ], 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}"] }]
|
642 | }], ctorParameters: function () {
|
643 | return [{ type: i0.ElementRef }, { type: i1.Directionality, decorators: [{
|
644 | type: Optional
|
645 | }] }];
|
646 | }, propDecorators: { _tiles: [{
|
647 | type: ContentChildren,
|
648 | args: [MatGridTile, { descendants: true }]
|
649 | }], cols: [{
|
650 | type: Input
|
651 | }], gutterSize: [{
|
652 | type: Input
|
653 | }], rowHeight: [{
|
654 | type: Input
|
655 | }] } });
|
656 |
|
657 |
|
658 |
|
659 |
|
660 |
|
661 |
|
662 |
|
663 |
|
664 | class MatGridListModule {
|
665 | }
|
666 | MatGridListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
667 | MatGridListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, declarations: [MatGridList,
|
668 | MatGridTile,
|
669 | MatGridTileText,
|
670 | MatGridTileHeaderCssMatStyler,
|
671 | MatGridTileFooterCssMatStyler,
|
672 | MatGridAvatarCssMatStyler], imports: [MatLineModule, MatCommonModule], exports: [MatGridList,
|
673 | MatGridTile,
|
674 | MatGridTileText,
|
675 | MatLineModule,
|
676 | MatCommonModule,
|
677 | MatGridTileHeaderCssMatStyler,
|
678 | MatGridTileFooterCssMatStyler,
|
679 | MatGridAvatarCssMatStyler] });
|
680 | MatGridListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, imports: [MatLineModule, MatCommonModule, MatLineModule,
|
681 | MatCommonModule] });
|
682 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatGridListModule, decorators: [{
|
683 | type: NgModule,
|
684 | args: [{
|
685 | imports: [MatLineModule, MatCommonModule],
|
686 | exports: [
|
687 | MatGridList,
|
688 | MatGridTile,
|
689 | MatGridTileText,
|
690 | MatLineModule,
|
691 | MatCommonModule,
|
692 | MatGridTileHeaderCssMatStyler,
|
693 | MatGridTileFooterCssMatStyler,
|
694 | MatGridAvatarCssMatStyler,
|
695 | ],
|
696 | declarations: [
|
697 | MatGridList,
|
698 | MatGridTile,
|
699 | MatGridTileText,
|
700 | MatGridTileHeaderCssMatStyler,
|
701 | MatGridTileFooterCssMatStyler,
|
702 | MatGridAvatarCssMatStyler,
|
703 | ],
|
704 | }]
|
705 | }] });
|
706 |
|
707 |
|
708 |
|
709 |
|
710 |
|
711 |
|
712 |
|
713 |
|
714 |
|
715 | const ɵTileCoordinator = TileCoordinator;
|
716 |
|
717 |
|
718 |
|
719 |
|
720 |
|
721 |
|
722 |
|
723 |
|
724 |
|
725 |
|
726 |
|
727 |
|
728 |
|
729 | export { MatGridAvatarCssMatStyler, MatGridList, MatGridListModule, MatGridTile, MatGridTileFooterCssMatStyler, MatGridTileHeaderCssMatStyler, MatGridTileText, ɵTileCoordinator };
|
730 |
|