@angular/material 21.0.0-next.8 → 21.0.0-rc.0

package/fesm2022/grid-list.mjs

@@ -7,533 +7,598 @@ import { InjectionToken, inject, ElementRef, Component, ViewEncapsulation, Chang
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import 'rxjs/operators';
 
-/**
- * Injection token used to provide a grid list to a tile and to avoid circular imports.
- * @docs-private
- */
 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() { }
-    /** Amount of rows that the grid tile takes up. */
-    get rowspan() {
-        return this._rowspan;
-    }
-    set rowspan(value) {
-        this._rowspan = Math.round(coerceNumberProperty(value));
-    }
-    /** Amount of columns that the grid tile takes up. */
-    get colspan() {
-        return this._colspan;
-    }
-    set colspan(value) {
-        this._colspan = Math.round(coerceNumberProperty(value));
-    }
-    /**
-     * Sets the style of the grid-tile element.  Needs to be set manually to avoid
-     * "Changed after checked" errors that would occur with HostBinding.
-     */
-    _setStyle(property, value) {
-        this._element.nativeElement.style[property] = value;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatGridTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", 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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  _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: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridTile,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Component
+  });
+  static ɵcmp = i0.ɵɵngDeclareComponent({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"],
+    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+    encapsulation: i0.ViewEncapsulation.None
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatGridTile, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-grid-tile', exportAs: 'matGridTile', host: {
-                        'class': 'mat-grid-tile',
-                        // Ensures that the "rowspan" and "colspan" input value is reflected in
-                        // the DOM. This is needed for the grid-tile harness.
-                        '[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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"] }]
-        }], ctorParameters: () => [], propDecorators: { rowspan: [{
-                type: Input
-            }], colspan: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"]
+    }]
+  }],
+  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: "20.2.0-next.2", ngImport: i0, type: MatGridTileText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", 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 });
+  _element = inject(ElementRef);
+  _lines;
+  constructor() {}
+  ngAfterContentInit() {
+    setLines(this._lines, this._element);
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridTileText,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Component
+  });
+  static ɵcmp = i0.ɵɵngDeclareComponent({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    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: "20.2.0-next.2", 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 }]
-            }] } });
-/**
- * Directive whose purpose is to add the mat- CSS styling to this selector.
- * @docs-private
- */
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  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: "20.2.0-next.2", ngImport: i0, type: MatGridAvatarCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatGridAvatarCssMatStyler, isStandalone: true, selector: "[mat-grid-avatar], [matGridAvatar]", host: { classAttribute: "mat-grid-avatar" }, ngImport: i0 });
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridAvatarCssMatStyler,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    type: MatGridAvatarCssMatStyler,
+    isStandalone: true,
+    selector: "[mat-grid-avatar], [matGridAvatar]",
+    host: {
+      classAttribute: "mat-grid-avatar"
+    },
+    ngImport: i0
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatGridAvatarCssMatStyler, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mat-grid-avatar], [matGridAvatar]',
-                    host: { 'class': 'mat-grid-avatar' },
-                }]
-        }] });
-/**
- * Directive whose purpose is to add the mat- CSS styling to this selector.
- * @docs-private
- */
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  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: "20.2.0-next.2", ngImport: i0, type: MatGridTileHeaderCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatGridTileHeaderCssMatStyler, isStandalone: true, selector: "mat-grid-tile-header", host: { classAttribute: "mat-grid-tile-header" }, ngImport: i0 });
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridTileHeaderCssMatStyler,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    type: MatGridTileHeaderCssMatStyler,
+    isStandalone: true,
+    selector: "mat-grid-tile-header",
+    host: {
+      classAttribute: "mat-grid-tile-header"
+    },
+    ngImport: i0
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatGridTileHeaderCssMatStyler, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'mat-grid-tile-header',
-                    host: { 'class': 'mat-grid-tile-header' },
-                }]
-        }] });
-/**
- * Directive whose purpose is to add the mat- CSS styling to this selector.
- * @docs-private
- */
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  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: "20.2.0-next.2", ngImport: i0, type: MatGridTileFooterCssMatStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatGridTileFooterCssMatStyler, isStandalone: true, selector: "mat-grid-tile-footer", host: { classAttribute: "mat-grid-tile-footer" }, ngImport: i0 });
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridTileFooterCssMatStyler,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    type: MatGridTileFooterCssMatStyler,
+    isStandalone: true,
+    selector: "mat-grid-tile-footer",
+    host: {
+      classAttribute: "mat-grid-tile-footer"
+    },
+    ngImport: i0
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatGridTileFooterCssMatStyler, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'mat-grid-tile-footer',
-                    host: { 'class': 'mat-grid-tile-footer' },
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: MatGridTileFooterCssMatStyler,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: 'mat-grid-tile-footer',
+      host: {
+        'class': 'mat-grid-tile-footer'
+      }
+    }]
+  }]
+});
 
-/**
- * RegExp that can be used to check whether a value will
- * be allowed inside a CSS `calc()` expression.
- */
 const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/;
-/**
- * Sets the style properties for an individual tile, given the position calculated by the
- * Tile Coordinator.
- * @docs-private
- */
 class TileStyler {
-    _gutterSize;
-    _rows = 0;
-    _rowspan = 0;
-    _cols;
-    _direction;
-    /**
-     * Adds grid-list layout info once it is available. Cannot be processed in the constructor
-     * because these properties haven't been calculated by that point.
-     *
-     * @param gutterSize Size of the grid's gutter.
-     * @param tracker Instance of the TileCoordinator.
-     * @param cols Amount of columns in the grid.
-     * @param direction Layout direction of the grid.
-     */
-    init(gutterSize, tracker, cols, direction) {
-        this._gutterSize = normalizeUnits(gutterSize);
-        this._rows = tracker.rowCount;
-        this._rowspan = tracker.rowspan;
-        this._cols = cols;
-        this._direction = direction;
-    }
-    /**
-     * Computes the amount of space a single 1x1 tile would take up (width or height).
-     * Used as a basis for other calculations.
-     * @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
-     * @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
-     * @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
-     */
-    getBaseTileSize(sizePercent, gutterFraction) {
-        // Take the base size percent (as would be if evenly dividing the size between cells),
-        // and then subtracting the size of one gutter. However, since there are no gutters on the
-        // edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
-        // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
-        // edge evenly among the cells).
-        return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
-    }
-    /**
-     * Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
-     * @param offset Number of tiles that have already been rendered in the row/column.
-     * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
-     * @return Position of the tile as a CSS calc() expression.
-     */
-    getTilePosition(baseSize, offset) {
-        // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
-        // row/column (offset).
-        return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
-    }
-    /**
-     * Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
-     * @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
-     * @param span The tile's rowspan or colspan.
-     * @return Size of the tile as a CSS calc() expression.
-     */
-    getTileSize(baseSize, span) {
-        return `(${baseSize} * ${span}) + (${span - 1} * ${this._gutterSize})`;
-    }
-    /**
-     * Sets the style properties to be applied to a tile for the given row and column index.
-     * @param tile Tile to which to apply the styling.
-     * @param rowIndex Index of the tile's row.
-     * @param colIndex Index of the tile's column.
-     */
-    setStyle(tile, rowIndex, colIndex) {
-        // Percent of the available horizontal space that one column takes up.
-        let percentWidthPerTile = 100 / this._cols;
-        // Fraction of the vertical gutter size that each column takes up.
-        // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
-        let gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
-        this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
-        this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
-    }
-    /** Sets the horizontal placement of the tile in the list. */
-    setColStyles(tile, colIndex, percentWidth, gutterWidth) {
-        // Base horizontal size of a column.
-        let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
-        // The width and horizontal position of each tile is always calculated the same way, but the
-        // height and vertical position depends on the rowMode.
-        let side = this._direction === 'rtl' ? 'right' : 'left';
-        tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
-        tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
-    }
-    /**
-     * Calculates the total size taken up by gutters across one axis of a list.
-     */
-    getGutterSpan() {
-        return `${this._gutterSize} * (${this._rowspan} - 1)`;
-    }
-    /**
-     * Calculates the total size taken up by tiles across one axis of a list.
-     * @param tileHeight Height of the tile.
-     */
-    getTileSpan(tileHeight) {
-        return `${this._rowspan} * ${this.getTileSize(tileHeight, 1)}`;
-    }
-    /**
-     * Calculates the computed height and returns the correct style property to set.
-     * This method can be implemented by each type of TileStyler.
-     * @docs-private
-     */
-    getComputedHeight() {
-        return null;
-    }
+  _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;
+  }
 }
-/**
- * This type of styler is instantiated when the user passes in a fixed row height.
- * Example `<mat-grid-list cols="3" rowHeight="100px">`
- * @docs-private
- */
 class FixedTileStyler extends TileStyler {
-    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);
-            });
-        }
-    }
+  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);
+      });
+    }
+  }
 }
-/**
- * This type of styler is instantiated when the user passes in a width:height ratio
- * for the row height.  Example `<mat-grid-list cols="3" rowHeight="3:1">`
- * @docs-private
- */
 class RatioTileStyler extends TileStyler {
-    /** Ratio width:height given by user to determine row height. */
-    rowHeightRatio;
-    baseTileHeight;
-    constructor(value) {
-        super();
-        this._parseRatio(value);
-    }
-    setRowStyles(tile, rowIndex, percentWidth, gutterWidth) {
-        let percentHeightPerTile = percentWidth / this.rowHeightRatio;
-        this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
-        // Use padding-top and margin-top to maintain the given aspect ratio, as
-        // a percentage-based value for these properties is applied versus the *width* of the
-        // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
-        tile._setStyle('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex));
-        tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
-    }
-    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]);
-    }
+  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]);
+  }
 }
-/**
- * This type of styler is instantiated when the user selects a "fit" row height mode.
- * In other words, the row height will reflect the total height of the container divided
- * by the number of rows.  Example `<mat-grid-list cols="3" rowHeight="fit">`
- *
- * @docs-private
- */
 class FitTileStyler extends TileStyler {
-    setRowStyles(tile, rowIndex) {
-        // Percent of the available vertical space that one row takes up.
-        let percentHeightPerTile = 100 / this._rowspan;
-        // Fraction of the horizontal gutter size that each column takes up.
-        let gutterHeightPerTile = (this._rows - 1) / this._rows;
-        // Base vertical size of a column.
-        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);
-            });
-        }
-    }
+  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);
+      });
+    }
+  }
 }
-/** Wraps a CSS string in a calc function */
 function calc(exp) {
-    return `calc(${exp})`;
+  return `calc(${exp})`;
 }
-/** Appends pixels to a CSS string if no units are given. */
 function normalizeUnits(value) {
-    return value.match(/([A-Za-z%]+)$/) ? value : `${value}px`;
+  return value.match(/([A-Za-z%]+)$/) ? value : `${value}px`;
 }
 
-// TODO(kara): Conditional (responsive) column count / row size.
-// TODO(kara): Re-layout on window resize / media change (debounced).
-// TODO(kara): gridTileHeader and gridTileFooter.
 const MAT_FIT_MODE = 'fit';
 class MatGridList {
-    _element = inject(ElementRef);
-    _dir = inject(Directionality, { optional: true });
-    /** Number of columns being rendered. */
-    _cols;
-    /** Used for determining the position of each tile in the grid. */
-    _tileCoordinator;
-    /**
-     * Row height value passed in by user. This can be one of three types:
-     * - Number value (ex: "100px"):  sets a fixed row height to that value
-     * - Ratio value (ex: "4:3"): sets the row height based on width:height ratio
-     * - "Fit" mode (ex: "fit"): sets the row height to total height divided by number of rows
-     */
-    _rowHeight;
-    /** The amount of space between tiles. This will be something like '5px' or '2em'. */
-    _gutter = '1px';
-    /** Sets position and size styles for a tile */
-    _tileStyler;
-    /** Query list of tiles that are being rendered. */
-    _tiles;
-    constructor() { }
-    /** Amount of columns in the grid list. */
-    get cols() {
-        return this._cols;
-    }
-    set cols(value) {
-        this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
-    }
-    /** Size of the grid list's gutter in pixels. */
-    get gutterSize() {
-        return this._gutter;
-    }
-    set gutterSize(value) {
-        this._gutter = `${value == null ? '' : value}`;
-    }
-    /** Set internal representation of row height from the user-provided 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();
-    }
-    /**
-     * The layout calculation is fairly cheap if nothing changes, so there's little cost
-     * to run it frequently.
-     */
-    ngAfterContentChecked() {
-        this._layoutTiles();
-    }
-    /** Throw a friendly error if cols property is missing */
-    _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">`);
-        }
-    }
-    /** Default to equal width:height if rowHeight property is missing */
-    _checkRowHeight() {
-        if (!this._rowHeight) {
-            this._setTileStyler('1:1');
-        }
-    }
-    /** Creates correct Tile Styler subtype based on rowHeight passed in by user */
-    _setTileStyler(rowHeight) {
-        if (this._tileStyler) {
-            this._tileStyler.reset(this);
-        }
-        if (rowHeight === MAT_FIT_MODE) {
-            this._tileStyler = new FitTileStyler();
-        }
-        else if (rowHeight && rowHeight.indexOf(':') > -1) {
-            this._tileStyler = new RatioTileStyler(rowHeight);
-        }
-        else {
-            this._tileStyler = new FixedTileStyler(rowHeight);
-        }
-    }
-    /** Computes and applies the size and position for all children grid tiles. */
-    _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());
-    }
-    /** Sets style on the main grid-list element, given the style name and value. */
-    _setListStyle(style) {
-        if (style) {
-            this._element.nativeElement.style[style[0]] = style[1];
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatGridList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", 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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  _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: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridList,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Component
+  });
+  static ɵcmp = i0.ɵɵngDeclareComponent({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"],
+    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+    encapsulation: i0.ViewEncapsulation.None
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatGridList, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-grid-list', exportAs: 'matGridList', host: {
-                        'class': 'mat-grid-list',
-                        // Ensures that the "cols" input value is reflected in the DOM. This is
-                        // needed for the grid-list harness.
-                        '[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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"] }]
-        }], ctorParameters: () => [], propDecorators: { _tiles: [{
-                type: ContentChildren,
-                args: [MatGridTile, { descendants: true }]
-            }], cols: [{
-                type: Input
-            }], gutterSize: [{
-                type: Input
-            }], rowHeight: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  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{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-header{font-size:var(--mat-grid-list-tile-header-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-header .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-header-secondary-text-size, var(--mat-sys-body-medium))}.mat-grid-tile-footer{font-size:var(--mat-grid-list-tile-footer-primary-text-size, var(--mat-sys-body-large))}.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:var(--mat-grid-list-tile-footer-secondary-text-size, var(--mat-sys-body-medium))}.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"]
+    }]
+  }],
+  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: "20.2.0-next.2", ngImport: i0, type: MatGridListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", 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: "20.2.0-next.2", ngImport: i0, type: MatGridListModule, imports: [MatLineModule, BidiModule,
-            MatLineModule] });
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridListModule,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.NgModule
+  });
+  static ɵmod = i0.ɵɵngDeclareNgModule({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    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: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatGridListModule,
+    imports: [MatLineModule, BidiModule, MatLineModule]
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", 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,
-                    ],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  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