@angular/material
Version:
Angular Material
605 lines (598 loc) • 27.6 kB
JavaScript
import { TileCoordinator } from './_public-api-chunk.mjs';
export { ɵTileCoordinator } from './_public-api-chunk.mjs';
import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, ContentChildren, Directive, NgModule } from '@angular/core';
import { coerceNumberProperty } from '@angular/cdk/coercion';
import { setLines, MatLine, MatLineModule } from './_line-chunk.mjs';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import 'rxjs/operators';
const MAT_GRID_LIST = new InjectionToken('MAT_GRID_LIST');
class MatGridTile {
_element = inject(ElementRef);
_gridList = inject(MAT_GRID_LIST, {
optional: true
});
_rowspan = 1;
_colspan = 1;
constructor() {}
get rowspan() {
return this._rowspan;
}
set rowspan(value) {
this._rowspan = Math.round(coerceNumberProperty(value));
}
get colspan() {
return this._colspan;
}
set colspan(value) {
this._colspan = Math.round(coerceNumberProperty(value));
}
_setStyle(property, value) {
this._element.nativeElement.style[property] = value;
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTile,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatGridTile,
isStandalone: true,
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 {\n display: block;\n position: relative;\n}\n\n.mat-grid-tile {\n display: block;\n position: absolute;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-tile-header,\n.mat-grid-tile .mat-grid-tile-footer {\n display: flex;\n align-items: center;\n height: 48px;\n color: #fff;\n background: rgba(0, 0, 0, 0.38);\n overflow: hidden;\n padding: 0 16px;\n position: absolute;\n left: 0;\n right: 0;\n}\n.mat-grid-tile .mat-grid-tile-header > *,\n.mat-grid-tile .mat-grid-tile-footer > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-tile-header.mat-2-line,\n.mat-grid-tile .mat-grid-tile-footer.mat-2-line {\n height: 68px;\n}\n.mat-grid-tile .mat-grid-list-text {\n display: flex;\n flex-direction: column;\n flex: auto;\n box-sizing: border-box;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-list-text > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-list-text:empty {\n display: none;\n}\n.mat-grid-tile .mat-grid-tile-header {\n top: 0;\n}\n.mat-grid-tile .mat-grid-tile-footer {\n bottom: 0;\n}\n.mat-grid-tile .mat-grid-avatar {\n padding-right: 16px;\n}\n[dir=rtl] .mat-grid-tile .mat-grid-avatar {\n padding-right: 0;\n padding-left: 16px;\n}\n.mat-grid-tile .mat-grid-avatar:empty {\n display: none;\n}\n\n.mat-grid-tile-header {\n font-size: var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-header .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-header .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-footer {\n font-size: var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-footer .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-footer .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-content {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0;\n margin: 0;\n}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTile,
decorators: [{
type: Component,
args: [{
selector: 'mat-grid-tile',
exportAs: 'matGridTile',
host: {
'class': 'mat-grid-tile',
'[attr.rowspan]': 'rowspan',
'[attr.colspan]': 'colspan'
},
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 {\n display: block;\n position: relative;\n}\n\n.mat-grid-tile {\n display: block;\n position: absolute;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-tile-header,\n.mat-grid-tile .mat-grid-tile-footer {\n display: flex;\n align-items: center;\n height: 48px;\n color: #fff;\n background: rgba(0, 0, 0, 0.38);\n overflow: hidden;\n padding: 0 16px;\n position: absolute;\n left: 0;\n right: 0;\n}\n.mat-grid-tile .mat-grid-tile-header > *,\n.mat-grid-tile .mat-grid-tile-footer > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-tile-header.mat-2-line,\n.mat-grid-tile .mat-grid-tile-footer.mat-2-line {\n height: 68px;\n}\n.mat-grid-tile .mat-grid-list-text {\n display: flex;\n flex-direction: column;\n flex: auto;\n box-sizing: border-box;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-list-text > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-list-text:empty {\n display: none;\n}\n.mat-grid-tile .mat-grid-tile-header {\n top: 0;\n}\n.mat-grid-tile .mat-grid-tile-footer {\n bottom: 0;\n}\n.mat-grid-tile .mat-grid-avatar {\n padding-right: 16px;\n}\n[dir=rtl] .mat-grid-tile .mat-grid-avatar {\n padding-right: 0;\n padding-left: 16px;\n}\n.mat-grid-tile .mat-grid-avatar:empty {\n display: none;\n}\n\n.mat-grid-tile-header {\n font-size: var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-header .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-header .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-footer {\n font-size: var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-footer .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-footer .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-content {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0;\n margin: 0;\n}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
rowspan: [{
type: Input
}],
colspan: [{
type: Input
}]
}
});
class MatGridTileText {
_element = inject(ElementRef);
_lines;
constructor() {}
ngAfterContentInit() {
setLines(this._lines, this._element);
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTileText,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatGridTileText,
isStandalone: true,
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
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTileText,
decorators: [{
type: Component,
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"
}]
}],
ctorParameters: () => [],
propDecorators: {
_lines: [{
type: ContentChildren,
args: [MatLine, {
descendants: true
}]
}]
}
});
class MatGridAvatarCssMatStyler {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridAvatarCssMatStyler,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatGridAvatarCssMatStyler,
isStandalone: true,
selector: "[mat-grid-avatar], [matGridAvatar]",
host: {
classAttribute: "mat-grid-avatar"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridAvatarCssMatStyler,
decorators: [{
type: Directive,
args: [{
selector: '[mat-grid-avatar], [matGridAvatar]',
host: {
'class': 'mat-grid-avatar'
}
}]
}]
});
class MatGridTileHeaderCssMatStyler {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTileHeaderCssMatStyler,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatGridTileHeaderCssMatStyler,
isStandalone: true,
selector: "mat-grid-tile-header",
host: {
classAttribute: "mat-grid-tile-header"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTileHeaderCssMatStyler,
decorators: [{
type: Directive,
args: [{
selector: 'mat-grid-tile-header',
host: {
'class': 'mat-grid-tile-header'
}
}]
}]
});
class MatGridTileFooterCssMatStyler {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTileFooterCssMatStyler,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatGridTileFooterCssMatStyler,
isStandalone: true,
selector: "mat-grid-tile-footer",
host: {
classAttribute: "mat-grid-tile-footer"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridTileFooterCssMatStyler,
decorators: [{
type: Directive,
args: [{
selector: 'mat-grid-tile-footer',
host: {
'class': 'mat-grid-tile-footer'
}
}]
}]
});
const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;
class TileStyler {
_gutterSize;
_rows = 0;
_rowspan = 0;
_cols;
_direction;
init(gutterSize, tracker, cols, direction) {
this._gutterSize = normalizeUnits(gutterSize);
this._rows = tracker.rowCount;
this._rowspan = tracker.rowspan;
this._cols = cols;
this._direction = direction;
}
getBaseTileSize(sizePercent, gutterFraction) {
return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
}
getTilePosition(baseSize, offset) {
return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
}
getTileSize(baseSize, span) {
return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;
}
setStyle(tile, rowIndex, colIndex) {
let percentWidthPerTile = 100 / this._cols;
let gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
}
setColStyles(tile, colIndex, percentWidth, gutterWidth) {
let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
let side = this._direction === 'rtl' ? 'right' : 'left';
tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
}
getGutterSpan() {
return `${this._gutterSize} * (${this._rowspan} - 1)`;
}
getTileSpan(tileHeight) {
return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;
}
getComputedHeight() {
return null;
}
}
class FixedTileStyler extends TileStyler {
fixedRowHeight;
constructor(fixedRowHeight) {
super();
this.fixedRowHeight = fixedRowHeight;
}
init(gutterSize, tracker, cols, direction) {
super.init(gutterSize, tracker, cols, direction);
this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
if (!cssCalcAllowedValue.test(this.fixedRowHeight) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error(`Invalid value "${this.fixedRowHeight}" set as rowHeight.`);
}
}
setRowStyles(tile, rowIndex) {
tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
}
getComputedHeight() {
return ['height', calc(`${this.getTileSpan(this.fixedRowHeight)} + ${this.getGutterSpan()}`)];
}
reset(list) {
list._setListStyle(['height', null]);
if (list._tiles) {
list._tiles.forEach(tile => {
tile._setStyle('top', null);
tile._setStyle('height', null);
});
}
}
}
class RatioTileStyler extends TileStyler {
rowHeightRatio;
baseTileHeight;
constructor(value) {
super();
this._parseRatio(value);
}
setRowStyles(tile, rowIndex, percentWidth, gutterWidth) {
let percentHeightPerTile = percentWidth / this.rowHeightRatio;
this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
}
getComputedHeight() {
return ['paddingBottom', calc(`${this.getTileSpan(this.baseTileHeight)} + ${this.getGutterSpan()}`)];
}
reset(list) {
list._setListStyle(['paddingBottom', null]);
list._tiles.forEach(tile => {
tile._setStyle('marginTop', null);
tile._setStyle('paddingTop', null);
});
}
_parseRatio(value) {
const ratioParts = value.split(':');
if (ratioParts.length !== 2 && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error(`mat-grid-list: invalid ratio given for row-height: "${value}"`);
}
this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
}
}
class FitTileStyler extends TileStyler {
setRowStyles(tile, rowIndex) {
let percentHeightPerTile = 100 / this._rowspan;
let gutterHeightPerTile = (this._rows - 1) / this._rows;
let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
tile._setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
}
reset(list) {
if (list._tiles) {
list._tiles.forEach(tile => {
tile._setStyle('top', null);
tile._setStyle('height', null);
});
}
}
}
function calc(exp) {
return `calc(${exp})`;
}
function normalizeUnits(value) {
return value.match(/([A-Za-z%]+)$/) ? value : `${value}px`;
}
const MAT_FIT_MODE = 'fit';
class MatGridList {
_element = inject(ElementRef);
_dir = inject(Directionality, {
optional: true
});
_cols;
_tileCoordinator;
_rowHeight;
_gutter = '1px';
_tileStyler;
_tiles;
constructor() {}
get cols() {
return this._cols;
}
set cols(value) {
this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
}
get gutterSize() {
return this._gutter;
}
set gutterSize(value) {
this._gutter = `${value == null ? '' : value}`;
}
get rowHeight() {
return this._rowHeight;
}
set rowHeight(value) {
const newValue = `${value == null ? '' : value}`;
if (newValue !== this._rowHeight) {
this._rowHeight = newValue;
this._setTileStyler(this._rowHeight);
}
}
ngOnInit() {
this._checkCols();
this._checkRowHeight();
}
ngAfterContentChecked() {
this._layoutTiles();
}
_checkCols() {
if (!this.cols && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error(`mat-grid-list: must pass in number of columns. ` + `Example: <mat-grid-list cols="3">`);
}
}
_checkRowHeight() {
if (!this._rowHeight) {
this._setTileStyler('1:1');
}
}
_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);
}
}
_layoutTiles() {
if (!this._tileCoordinator) {
this._tileCoordinator = new TileCoordinator();
}
const tracker = this._tileCoordinator;
const tiles = this._tiles.filter(tile => !tile._gridList || tile._gridList === this);
const direction = this._dir ? this._dir.value : 'ltr';
this._tileCoordinator.update(this.cols, tiles);
this._tileStyler.init(this.gutterSize, tracker, this.cols, direction);
tiles.forEach((tile, index) => {
const pos = tracker.positions[index];
this._tileStyler.setStyle(tile, pos.row, pos.col);
});
this._setListStyle(this._tileStyler.getComputedHeight());
}
_setListStyle(style) {
if (style) {
this._element.nativeElement.style[style[0]] = style[1];
}
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridList,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatGridList,
isStandalone: true,
selector: "mat-grid-list",
inputs: {
cols: "cols",
gutterSize: "gutterSize",
rowHeight: "rowHeight"
},
host: {
properties: {
"attr.cols": "cols"
},
classAttribute: "mat-grid-list"
},
providers: [{
provide: MAT_GRID_LIST,
useExisting: MatGridList
}],
queries: [{
propertyName: "_tiles",
predicate: MatGridTile,
descendants: true
}],
exportAs: ["matGridList"],
ngImport: i0,
template: "<div>\n <ng-content></ng-content>\n</div>",
styles: [".mat-grid-list {\n display: block;\n position: relative;\n}\n\n.mat-grid-tile {\n display: block;\n position: absolute;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-tile-header,\n.mat-grid-tile .mat-grid-tile-footer {\n display: flex;\n align-items: center;\n height: 48px;\n color: #fff;\n background: rgba(0, 0, 0, 0.38);\n overflow: hidden;\n padding: 0 16px;\n position: absolute;\n left: 0;\n right: 0;\n}\n.mat-grid-tile .mat-grid-tile-header > *,\n.mat-grid-tile .mat-grid-tile-footer > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-tile-header.mat-2-line,\n.mat-grid-tile .mat-grid-tile-footer.mat-2-line {\n height: 68px;\n}\n.mat-grid-tile .mat-grid-list-text {\n display: flex;\n flex-direction: column;\n flex: auto;\n box-sizing: border-box;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-list-text > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-list-text:empty {\n display: none;\n}\n.mat-grid-tile .mat-grid-tile-header {\n top: 0;\n}\n.mat-grid-tile .mat-grid-tile-footer {\n bottom: 0;\n}\n.mat-grid-tile .mat-grid-avatar {\n padding-right: 16px;\n}\n[dir=rtl] .mat-grid-tile .mat-grid-avatar {\n padding-right: 0;\n padding-left: 16px;\n}\n.mat-grid-tile .mat-grid-avatar:empty {\n display: none;\n}\n\n.mat-grid-tile-header {\n font-size: var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-header .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-header .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-footer {\n font-size: var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-footer .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-footer .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-content {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0;\n margin: 0;\n}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridList,
decorators: [{
type: Component,
args: [{
selector: 'mat-grid-list',
exportAs: 'matGridList',
host: {
'class': 'mat-grid-list',
'[attr.cols]': 'cols'
},
providers: [{
provide: MAT_GRID_LIST,
useExisting: MatGridList
}],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "<div>\n <ng-content></ng-content>\n</div>",
styles: [".mat-grid-list {\n display: block;\n position: relative;\n}\n\n.mat-grid-tile {\n display: block;\n position: absolute;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-tile-header,\n.mat-grid-tile .mat-grid-tile-footer {\n display: flex;\n align-items: center;\n height: 48px;\n color: #fff;\n background: rgba(0, 0, 0, 0.38);\n overflow: hidden;\n padding: 0 16px;\n position: absolute;\n left: 0;\n right: 0;\n}\n.mat-grid-tile .mat-grid-tile-header > *,\n.mat-grid-tile .mat-grid-tile-footer > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-tile-header.mat-2-line,\n.mat-grid-tile .mat-grid-tile-footer.mat-2-line {\n height: 68px;\n}\n.mat-grid-tile .mat-grid-list-text {\n display: flex;\n flex-direction: column;\n flex: auto;\n box-sizing: border-box;\n overflow: hidden;\n}\n.mat-grid-tile .mat-grid-list-text > * {\n margin: 0;\n padding: 0;\n font-weight: normal;\n font-size: inherit;\n}\n.mat-grid-tile .mat-grid-list-text:empty {\n display: none;\n}\n.mat-grid-tile .mat-grid-tile-header {\n top: 0;\n}\n.mat-grid-tile .mat-grid-tile-footer {\n bottom: 0;\n}\n.mat-grid-tile .mat-grid-avatar {\n padding-right: 16px;\n}\n[dir=rtl] .mat-grid-tile .mat-grid-avatar {\n padding-right: 0;\n padding-left: 16px;\n}\n.mat-grid-tile .mat-grid-avatar:empty {\n display: none;\n}\n\n.mat-grid-tile-header {\n font-size: var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-header .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-header .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-footer {\n font-size: var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large));\n}\n.mat-grid-tile-footer .mat-line {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n box-sizing: border-box;\n}\n.mat-grid-tile-footer .mat-line:nth-child(n+2) {\n font-size: var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium));\n}\n\n.mat-grid-tile-content {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0;\n margin: 0;\n}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
_tiles: [{
type: ContentChildren,
args: [MatGridTile, {
descendants: true
}]
}],
cols: [{
type: Input
}],
gutterSize: [{
type: Input
}],
rowHeight: [{
type: Input
}]
}
});
class MatGridListModule {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridListModule,
deps: [],
target: i0.ɵɵFactoryTarget.NgModule
});
static ɵmod = i0.ɵɵngDeclareNgModule({
minVersion: "14.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridListModule,
imports: [MatLineModule, MatGridList, MatGridTile, MatGridTileText, MatGridTileHeaderCssMatStyler, MatGridTileFooterCssMatStyler, MatGridAvatarCssMatStyler],
exports: [BidiModule, MatGridList, MatGridTile, MatGridTileText, MatLineModule, MatGridTileHeaderCssMatStyler, MatGridTileFooterCssMatStyler, MatGridAvatarCssMatStyler]
});
static ɵinj = i0.ɵɵngDeclareInjector({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridListModule,
imports: [MatLineModule, BidiModule, MatLineModule]
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatGridListModule,
decorators: [{
type: NgModule,
args: [{
imports: [MatLineModule, MatGridList, MatGridTile, MatGridTileText, MatGridTileHeaderCssMatStyler, MatGridTileFooterCssMatStyler, MatGridAvatarCssMatStyler],
exports: [BidiModule, MatGridList, MatGridTile, MatGridTileText, MatLineModule, MatGridTileHeaderCssMatStyler, MatGridTileFooterCssMatStyler, MatGridAvatarCssMatStyler]
}]
}]
});
export { MatGridAvatarCssMatStyler, MatGridList, MatGridListModule, MatGridTile, MatGridTileFooterCssMatStyler, MatGridTileHeaderCssMatStyler, MatGridTileText, MatLine };
//# sourceMappingURL=grid-list.mjs.map