feat: expose version object in releases (#4962)

* In releases there will be a constant called `VERSION` that holds the current version of the installed package (material or cdk)
* This is similar as for every @angular package like core, forms, compiler.

Add accessibility demo page for grid list

.

Author: devversion

src/demo-app/a11y/a11y-module.ts

@@ -6,6 +6,7 @@ import {DemoMaterialModule} from '../demo-material-module';
 import {AccessibilityHome, AccessibilityDemo} from './a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
+import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ export class AccessibilityRoutingModule {}
     AccessibilityHome,
     ButtonAccessibilityDemo,
     CheckboxAccessibilityDemo,
+    GridListAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -19,5 +19,6 @@ export class AccessibilityDemo {
     {name: 'Home', route: '.'},
     {name: 'Button', route: 'button'},
     {name: 'Checkbox', route: 'checkbox'},
+    {name: 'Grid list', route: 'grid-list'},
   ];
 }

src/demo-app/a11y/grid-list/grid-list-a11y.html

@@ -0,0 +1,42 @@
+<section>
+  <h2>Fixed-height grid list</h2>
+  <md-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
+    <md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
+                  [style.background]="tile.color">
+      {{tile.text}}
+    </md-grid-tile>
+  </md-grid-list>
+</section>
+
+<section>
+  <h2>Ratio-height grid list</h2>
+  <md-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
+    <md-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
+      {{tile.text}}
+    </md-grid-tile>
+  </md-grid-list>
+</section>
+
+<section>
+  <h2>Fit-height grid list</h2>
+  <md-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
+                [style.height]="fitListHeight">
+    <md-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
+      {{tile.text}}
+    </md-grid-tile>
+  </md-grid-list>
+</section>
+
+<section>
+  <h2>Grid list with header and footer</h2>
+  <md-grid-list cols="3" rowHeight="200px">
+    <md-grid-tile *ngFor="let dog of dogs">
+      <md-grid-tile-header>{{dog.name}}</md-grid-tile-header>
+      <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
+      <md-grid-tile-footer>
+        <span md-line>Human: {{dog.human}}</span>
+        <md-icon>star_border</md-icon>
+      </md-grid-tile-footer>
+    </md-grid-tile>
+  </md-grid-list>
+</section>

src/demo-app/a11y/grid-list/grid-list-a11y.scss

@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+
+interface Dog {
+  name: string;
+  human: string;
+}
+@Component({
+  moduleId: module.id,
+  selector: 'grid-list-a11y',
+  templateUrl: 'grid-list-a11y.html',
+  styleUrls: ['grid-list-a11y.css'],
+})
+export class GridListAccessibilityDemo {
+  dogs: Dog[] = [
+    { name: 'Porter', human: 'Kara' },
+    { name: 'Mal', human: 'Jeremy' },
+    { name: 'Koby', human: 'Igor' },
+    { name: 'Razzle', human: 'Ward' },
+    { name: 'Molly', human: 'Rob' },
+    { name: 'Husi', human: 'Matias' },
+  ];
+
+  tiles = [
+    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
+    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
+    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
+    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
+  ];
+
+  fixedCols = 4;
+  fixedRowHeight = 100;
+  ratioGutter = 1;
+  fitListHeight = '400px';
+  ratio = '4:1';
+}

src/demo-app/a11y/grid-list/grid-list-a11y.ts

@@ -1,10 +1,12 @@
 import {Routes} from '@angular/router';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
+import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {AccessibilityHome} from './a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
   {path: 'button', component: ButtonAccessibilityDemo},
   {path: 'checkbox', component: CheckboxAccessibilityDemo},
+  {path: 'grid-list', component: GridListAccessibilityDemo},
 ];