@angular/material/bundles/material-examples.umd.min.js

Angular Material

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("@angular/cdk/table"),require("@angular/material"),require("rxjs/add/operator/startWith"),require("rxjs/add/operator/map"),require("@angular/cdk/collections"),require("rxjs/BehaviorSubject"),require("rxjs/add/observable/merge"),require("@angular/platform-browser"),require("rxjs/Observable"),require("rxjs/add/observable/of"),require("rxjs/add/operator/debounceTime"),require("rxjs/add/operator/distinctUntilChanged"),require("rxjs/add/observable/fromEvent"),require("@angular/http"),require("rxjs/add/operator/catch"),require("rxjs/add/operator/switchMap")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/common","@angular/cdk/table","@angular/material","rxjs/add/operator/startWith","rxjs/add/operator/map","@angular/cdk/collections","rxjs/BehaviorSubject","rxjs/add/observable/merge","@angular/platform-browser","rxjs/Observable","rxjs/add/observable/of","rxjs/add/operator/debounceTime","rxjs/add/operator/distinctUntilChanged","rxjs/add/observable/fromEvent","@angular/http","rxjs/add/operator/catch","rxjs/add/operator/switchMap"],t):t((e.ng=e.ng||{},e.ng["material-examples"]=e.ng["material-examples"]||{}),e.ng.core,e.ng.forms,e.ng.common,e.ng.cdk.table,e.ng.material,e.Rx.Observable.prototype,e.Rx.Observable.prototype,e.ng.cdk.collections,e.Rx,e.Rx.Observable,e.ng.platformBrowser,e.Rx,e.Rx.Observable,e.Rx.Observable.prototype,e.Rx.Observable.prototype,e.Rx.Observable,e.ng.http)}(this,function(e,t,a,o,n,r,l,i,s,d,m,c,u,p,f,h,g,b){"use strict";function x(e,t){function a(){this.constructor=e}w(e,t),e.prototype=null===t?Object.create(t):(a.prototype=t.prototype,new a)}function v(e,t,a){return(e<t?-1:1)*(a?1:-1)}var w=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a])},y=function(){function e(){}return e}();y.decorators=[{type:t.NgModule,args:[{exports:[n.CdkTableModule,r.MdAutocompleteModule,r.MdButtonModule,r.MdButtonToggleModule,r.MdCardModule,r.MdCheckboxModule,r.MdChipsModule,r.MdDatepickerModule,r.MdDialogModule,r.MdExpansionModule,r.MdFormFieldModule,r.MdGridListModule,r.MdIconModule,r.MdInputModule,r.MdListModule,r.MdMenuModule,r.MdProgressBarModule,r.MdProgressSpinnerModule,r.MdRadioModule,r.MdSelectModule,r.MdSlideToggleModule,r.MdSliderModule,r.MdSidenavModule,r.MdSnackBarModule,r.MdStepperModule,r.MdTabsModule,r.MdToolbarModule,r.MdTooltipModule,r.MdPaginatorModule,r.MdSortModule,r.MdTableModule]}]}],y.ctorParameters=function(){return[]};var C=function(){function e(e){this.name=e}return e}(),k=function(){function e(){this.myControl=new a.FormControl,this.options=[new C("Mary"),new C("Shelley"),new C("Igor")]}return e.prototype.ngOnInit=function(){var e=this;this.filteredOptions=this.myControl.valueChanges.startWith(null).map(function(e){return e&&"object"==typeof e?e.name:e}).map(function(t){return t?e.filter(t):e.options.slice()})},e.prototype.filter=function(e){return this.options.filter(function(t){return 0===t.name.toLowerCase().indexOf(e.toLowerCase())})},e.prototype.displayFn=function(e){return e?e.name:e},e}();k.decorators=[{type:t.Component,args:[{selector:"autocomplete-display-example",template:'<form class="example-form"><md-form-field class="example-full-width"><input type="text" placeholder="Assignee" aria-label="Assignee" mdInput [formControl]="myControl" [mdAutocomplete]="auto"><md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn"><md-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option.name }}</md-option></md-autocomplete></md-form-field></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],k.ctorParameters=function(){return[]};var D=function(){function e(){this.myControl=new a.FormControl,this.options=["One","Two","Three"]}return e.prototype.ngOnInit=function(){var e=this;this.filteredOptions=this.myControl.valueChanges.startWith(null).map(function(t){return t?e.filter(t):e.options.slice()})},e.prototype.filter=function(e){return this.options.filter(function(t){return 0===t.toLowerCase().indexOf(e.toLowerCase())})},e}();D.decorators=[{type:t.Component,args:[{selector:"autocomplete-filter-example",template:'<form class="example-form"><md-form-field class="example-full-width"><input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto"><md-autocomplete #auto="mdAutocomplete"><md-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</md-option></md-autocomplete></md-form-field></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],D.ctorParameters=function(){return[]};var S=function(){function e(){var e=this;this.states=[{name:"Arkansas",population:"2.978M",flag:"https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg"},{name:"California",population:"39.14M",flag:"https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg"},{name:"Florida",population:"20.27M",flag:"https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg"},{name:"Texas",population:"27.47M",flag:"https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg"}],this.stateCtrl=new a.FormControl,this.filteredStates=this.stateCtrl.valueChanges.startWith(null).map(function(t){return t?e.filterStates(t):e.states.slice()})}return e.prototype.filterStates=function(e){return this.states.filter(function(t){return 0===t.name.toLowerCase().indexOf(e.toLowerCase())})},e}();S.decorators=[{type:t.Component,args:[{selector:"autocomplete-overview-example",template:'<form class="example-form"><md-form-field class="example-full-width"><input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl"><md-autocomplete #auto="mdAutocomplete"><md-option *ngFor="let state of filteredStates | async" [value]="state.name"><img style="vertical-align:middle" aria-hidden src="{{state.flag}}" height="25"> <span>{{ state.name }}</span> | <small>Population: {{state.population}}</small></md-option></md-autocomplete></md-form-field><br><md-slide-toggle [checked]="stateCtrl.disabled" (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">Disable Input?</md-slide-toggle></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],S.ctorParameters=function(){return[]};var M=function(){function e(){this.myControl=new a.FormControl,this.options=["One","Two","Three"]}return e}();M.decorators=[{type:t.Component,args:[{selector:"autocomplete-simple-example",template:'<form class="example-form"><md-form-field class="example-full-width"><input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto"><md-autocomplete #auto="mdAutocomplete"><md-option *ngFor="let option of options" [value]="option">{{ option }}</md-option></md-autocomplete></md-form-field></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],M.ctorParameters=function(){return[]};var N=function(){function e(){}return e}();N.decorators=[{type:t.Component,args:[{selector:"button-overview-example",template:"<button md-button>Click me!</button>"}]}],N.ctorParameters=function(){return[]};var P=function(){function e(){}return e}();P.decorators=[{type:t.Component,args:[{selector:"button-toggle-exclusive-example",template:'<md-button-toggle-group #group="mdButtonToggleGroup"><md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle><md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle><md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle><md-button-toggle value="justify" disabled="disabled"><md-icon>format_align_justify</md-icon></md-button-toggle></md-button-toggle-group><div class="example-selected-value">Selected value: {{group.value}}</div>',styles:[".example-selected-value { margin: 15px 0; } "]}]}],P.ctorParameters=function(){return[]};var F=function(){function e(){}return e}();F.decorators=[{type:t.Component,args:[{selector:"button-toggle-overview-example",template:"<md-button-toggle>Toggle me!</md-button-toggle>"}]}],F.ctorParameters=function(){return[]};var I=function(){function e(){}return e}();I.decorators=[{type:t.Component,args:[{selector:"button-types-example",template:'<h3>Basic Buttons</h3><div class="button-row"><button md-button>Basic</button> <button md-button color="primary">Primary</button> <button md-button color="accent">Accent</button> <button md-button color="warn">Warn</button> <button md-button disabled="disabled">Disabled</button> <a md-button routerLink=".">Link</a></div><h3>Raised Buttons</h3><div class="button-row"><button md-raised-button>Basic</button> <button md-raised-button color="primary">Primary</button> <button md-raised-button color="accent">Accent</button> <button md-raised-button color="warn">Warn</button> <button md-raised-button disabled="disabled">Disabled</button> <a md-raised-button routerLink=".">Link</a></div><h3>Icon Buttons</h3><div class="button-row"><button md-icon-button><md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon></button> <button md-icon-button color="primary"><md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon></button> <button md-icon-button color="accent"><md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon></button> <button md-icon-button color="warn"><md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon></button> <button md-icon-button disabled="disabled"><md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon></button></div><h3>Fab Buttons</h3><div class="button-row"><button md-fab>Basic</button> <button md-fab color="primary">Primary</button> <button md-fab color="accent">Accent</button> <button md-fab color="warn">Warn</button> <button md-fab disabled="disabled">Disabled</button> <button md-fab><md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon></button> <a md-fab routerLink=".">Link</a></div><h3>Mini Fab Buttons</h3><div class="button-row"><button md-mini-fab>Basic</button> <button md-mini-fab color="primary">Primary</button> <button md-mini-fab color="accent">Accent</button> <button md-mini-fab color="warn">Warn</button> <button md-mini-fab disabled="disabled">Disabled</button> <button md-mini-fab><md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon></button> <a md-mini-fab routerLink=".">Link</a></div>',styles:[".example-button-row { display: flex; align-items: center; justify-content: space-around; } "]}]}],I.ctorParameters=function(){return[]};var O=function(){function e(){}return e}();O.decorators=[{type:t.Component,args:[{selector:"card-fancy-example",template:'<md-card class="example-card"><md-card-header><div md-card-avatar class="example-header-image"></div><md-card-title>Shiba Inu</md-card-title><md-card-subtitle>Dog Breed</md-card-subtitle></md-card-header><img md-card-image src="assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"><md-card-content><p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.</p></md-card-content><md-card-actions><button md-button>LIKE</button> <button md-button>SHARE</button></md-card-actions></md-card>',styles:[".example-card { width: 400px; } .example-header-image { background-image: url('../../../assets/img/examples/shiba1.jpg'); background-size: cover; } "]}]}],O.ctorParameters=function(){return[]};var T=function(){function e(){}return e}();T.decorators=[{type:t.Component,args:[{selector:"card-overview-example",template:"<md-card>Simple card</md-card>"}]}],T.ctorParameters=function(){return[]};var A=function(){function e(){this.displayedColumns=["userId","userName","progress","color"],this.exampleDatabase=new _}return e.prototype.ngOnInit=function(){this.dataSource=new L(this.exampleDatabase)},e}();A.decorators=[{type:t.Component,args:[{selector:"cdk-table-basic-example",styles:["/* Structure */ .example-container { display: flex; flex-direction: column; min-width: 300px; } /* * Styles to make the demo's cdk-table match the material design spec * https://material.io/guidelines/components/data-tables.html */ .example-table { flex: 1 1 auto; overflow: auto; max-height: 500px; } .example-header-row, .example-row { display: flex; border-bottom: 1px solid #ccc; align-items: center; height: 32px; padding: 0 8px; } .example-cell, .example-header-cell { flex: 1; } .example-header-cell { font-size: 12px; font-weight: bold; color: rgba(0, 0, 0, 0.54); } .example-cell { font-size: 13px; color: rgba(0, 0, 0, 0.87); } "],template:'<div class="example-container mat-elevation-z8"><cdk-table #table [dataSource]="dataSource" class="example-table"><ng-container cdkColumnDef="userId"><cdk-header-cell *cdkHeaderCellDef class="example-header-cell">ID</cdk-header-cell><cdk-cell *cdkCellDef="let row" class="example-cell">{{row.id}}</cdk-cell></ng-container><ng-container cdkColumnDef="progress"><cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Progress</cdk-header-cell><cdk-cell *cdkCellDef="let row" class="example-cell">{{row.progress}}%</cdk-cell></ng-container><ng-container cdkColumnDef="userName"><cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Name</cdk-header-cell><cdk-cell *cdkCellDef="let row" class="example-cell">{{row.name}}</cdk-cell></ng-container><ng-container cdkColumnDef="color"><cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell><cdk-cell *cdkCellDef="let row" class="example-cell" [style.color]="row.color">{{row.color}}</cdk-cell></ng-container><cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row><cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row></cdk-table></div>'}]}],A.ctorParameters=function(){return[]};var B=["maroon","red","orange","yellow","olive","green","purple","fuchsia","lime","teal","aqua","blue","navy","black","gray"],E=["Maia","Asher","Olivia","Atticus","Amelia","Jack","Charlotte","Theodore","Isla","Oliver","Isabella","Jasper","Cora","Levi","Violet","Arthur","Mia","Thomas","Elizabeth"],_=function(){function e(){this.dataChange=new d.BehaviorSubject([]);for(var e=0;e<100;e++)this.addUser()}return Object.defineProperty(e.prototype,"data",{get:function(){return this.dataChange.value},enumerable:!0,configurable:!0}),e.prototype.addUser=function(){var e=this.data.slice();e.push(this.createNewUser()),this.dataChange.next(e)},e.prototype.createNewUser=function(){var e=E[Math.round(Math.random()*(E.length-1))]+" "+E[Math.round(Math.random()*(E.length-1))].charAt(0)+".";return{id:(this.data.length+1).toString(),name:e,progress:Math.round(100*Math.random()).toString(),color:B[Math.round(Math.random()*(B.length-1))]}},e}(),L=function(e){function t(t){var a=e.call(this)||this;return a._exampleDatabase=t,a}return x(t,e),t.prototype.connect=function(){return this._exampleDatabase.dataChange},t.prototype.disconnect=function(){},t}(s.DataSource),z=function(){function e(){this.checked=!1,this.indeterminate=!1,this.align="start",this.disabled=!1}return e}();z.decorators=[{type:t.Component,args:[{selector:"checkbox-configurable-example",template:'<md-card><md-card-content><h2 class="example-h2">Checkbox configuration</h2><section class="example-section"><md-checkbox class="example-margin" [(ngModel)]="checked">Checked</md-checkbox><md-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</md-checkbox></section><section class="example-section"><label class="example-margin">Align:</label><md-radio-group [(ngModel)]="align"><md-radio-button class="example-margin" value="start">Start</md-radio-button><md-radio-button class="example-margin" value="end">End</md-radio-button></md-radio-group></section><section class="example-section"><md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox></section></md-card-content></md-card><md-card class="result"><md-card-content><h2 class="example-h2">Result</h2><section class="example-section"><md-checkbox class="example-margin" [(ngModel)]="checked" [(indeterminate)]="indeterminate" [align]="align" [disabled]="disabled">I\'m a checkbox</md-checkbox></section></md-card-content></md-card>',styles:[".example-h2 { margin: 10px; } .example-section { display: flex; align-content: center; align-items: center; height: 60px; } .example-margin { margin: 0 10px; } "]}]}],z.ctorParameters=function(){return[]};var q=function(){function e(){}return e}();q.decorators=[{type:t.Component,args:[{selector:"checkbox-overview-example",template:"<md-checkbox>Check me!</md-checkbox>"}]}],q.ctorParameters=function(){return[]};var R=188,j=function(){function e(){this.visible=!0,this.selectable=!0,this.removable=!0,this.addOnBlur=!0,this.separatorKeysCodes=[r.ENTER,R],this.fruits=[{name:"Lemon"},{name:"Lime"},{name:"Apple"}]}return e.prototype.add=function(e){var t=e.input,a=e.value;(a||"").trim()&&this.fruits.push({name:a.trim()}),t&&(t.value="")},e.prototype.remove=function(e){var t=this.fruits.indexOf(e);t>=0&&this.fruits.splice(t,1)},e}();j.decorators=[{type:t.Component,args:[{selector:"chips-input-example",template:'<md-form-field class="demo-chip-list"><md-chip-list mdPrefix #chipList><md-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (remove)="remove(fruit)">{{fruit.name}}<md-icon mdChipRemove *ngIf="removable">cancel</md-icon></md-chip></md-chip-list><input mdInput placeholder="New fruit..." [mdChipInputFor]="chipList" [mdChipInputSeparatorKeyCodes]="separatorKeysCodes" [mdChipInputAddOnBlur]="addOnBlur" (mdChipInputTokenEnd)="add($event)"></md-form-field>',styles:[".demo-chip-list{width:100%}"]}]}],j.ctorParameters=function(){return[]};var H=function(){function e(){}return e}();H.decorators=[{type:t.Component,args:[{selector:"chips-overview-example",template:'<md-chip-list><md-chip>One fish</md-chip><md-chip>Two fish</md-chip><md-chip color="primary" selected="true">Primary fish</md-chip><md-chip color="accent" selected="true">Accent fish</md-chip></md-chip-list>',styles:["/** No CSS for this example */ "]}]}],H.ctorParameters=function(){return[]};var V=function(){function e(){this.availableColors=[{name:"none",color:""},{name:"Primary",color:"primary"},{name:"Accent",color:"accent"},{name:"Warn",color:"warn"}]}return e}();V.decorators=[{type:t.Component,args:[{selector:"chips-stacked-example",template:'<md-chip-list class="mat-chip-list-stacked"><md-chip *ngFor="let chipColor of availableColors" selected="true" color="{{chipColor.color}}">{{chipColor.name}}</md-chip></md-chip-list>',styles:["md-chip { max-width: 200px; } "]}]}],V.ctorParameters=function(){return[]};var W=function(){function e(){}return e}();W.decorators=[{type:t.Component,args:[{selector:"datepicker-api-example",template:'<md-form-field class="example-full-width"><input mdInput [mdDatepicker]="picker" placeholder="Choose a date"><md-datepicker #picker></md-datepicker></md-form-field><button md-raised-button (click)="picker.open()">Open</button>',styles:["/** No CSS for this example */ "]}]}],W.ctorParameters=function(){return[]};var U=function(){function e(){this.myFilter=function(e){var t=e.getDay();return 0!==t&&6!==t}}return e}();U.decorators=[{type:t.Component,args:[{selector:"datepicker-filter-example",template:'<md-form-field class="example-full-width"><input mdInput [mdDatepickerFilter]="myFilter" [mdDatepicker]="picker" placeholder="Choose a date"><md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle><md-datepicker #picker></md-datepicker></md-form-field>',styles:["/** No CSS for this example */ "]}]}],U.ctorParameters=function(){return[]};var G=function(){function e(){this.minDate=new Date(2e3,0,1),this.maxDate=new Date(2020,0,1)}return e}();G.decorators=[{type:t.Component,args:[{selector:"datepicker-min-max-example",template:'<md-form-field class="example-full-width"><input mdInput [min]="minDate" [max]="maxDate" [mdDatepicker]="picker" placeholder="Choose a date"><md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle><md-datepicker #picker></md-datepicker></md-form-field>',styles:["/** No CSS for this example */ "]}]}],G.ctorParameters=function(){return[]};var J=function(){function e(){}return e}();J.decorators=[{type:t.Component,args:[{selector:"datepicker-overview-example",template:'<md-form-field><input mdInput [mdDatepicker]="picker" placeholder="Choose a date"><md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle><md-datepicker #picker></md-datepicker></md-form-field>',styles:["/** No CSS for this example */ "]}]}],J.ctorParameters=function(){return[]};var $=function(){function e(){this.startDate=new Date(1990,0,1)}return e}();$.decorators=[{type:t.Component,args:[{selector:"datepicker-start-view-example",template:'<md-form-field><input mdInput [mdDatepicker]="picker" placeholder="Choose a date"><md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle><md-datepicker #picker startView="year" [startAt]="startDate"></md-datepicker></md-form-field>',styles:["/** No CSS for this example */ "]}]}],$.ctorParameters=function(){return[]};var K=function(){function e(){}return e}();K.decorators=[{type:t.Component,args:[{selector:"datepicker-touch-example",template:'<md-form-field class="example-full-width"><input mdInput [mdDatepicker]="picker" placeholder="Choose a date"><md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle><md-datepicker touchUi="true" #picker></md-datepicker></md-form-field>',styles:["/** No CSS for this example */ "]}]}],K.ctorParameters=function(){return[]};var Y=function(){function e(e){this.dialog=e}return e.prototype.openDialog=function(){this.dialog.open(Z,{height:"350px"}).afterClosed().subscribe(function(e){console.log("Dialog result: "+e)})},e}();Y.decorators=[{type:t.Component,args:[{selector:"dialog-content-example",template:'<button md-button (click)="openDialog()">Open dialog</button>'}]}],Y.ctorParameters=function(){return[{type:r.MdDialog}]};var Z=function(){function e(){}return e}();Z.decorators=[{type:t.Component,args:[{selector:"dialog-content-example-dialog",template:'<h2 md-dialog-title>Install Angular</h2><md-dialog-content><h3>DEVELOP ACROSS ALL PLATFORMS</h3><p>Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.</p><h3>SPEED & PERFORMANCE</h3><p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p><h3>INCREDIBLE TOOLING</h3><p>Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.</p><h3>LOVED BY MILLIONS</h3><p>From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google\'s largest applications.</p></md-dialog-content><md-dialog-actions><button md-button [md-dialog-close]="true" tabindex="1">Install</button> <button md-button md-dialog-close tabindex="-1">Cancel</button></md-dialog-actions>'}]}],Z.ctorParameters=function(){return[]};var X=function(){function e(e){this.dialog=e}return e.prototype.openDialog=function(){this.dialog.open(Q,{data:{animal:"panda"}})},e}();X.decorators=[{type:t.Component,args:[{selector:"dialog-data-example",template:'<button md-button (click)="openDialog()">Open dialog</button>'}]}],X.ctorParameters=function(){return[{type:r.MdDialog}]};var Q=function(){function e(e){this.data=e}return e}();Q.decorators=[{type:t.Component,args:[{selector:"dialog-data-example-dialog",template:"<h1 md-dialog-title>Favorite Animal</h1><div md-dialog-content>My favorite animal is:<ul><li><span *ngIf=\"data.animal === 'panda'\">&#10003;</span> Panda</li><li><span *ngIf=\"data.animal === 'unicorn'\">&#10003;</span> Unicorn</li><li><span *ngIf=\"data.animal === 'lion'\">&#10003;</span> Lion</li></ul></div>"}]}],Q.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[r.MD_DIALOG_DATA]}]}]};var ee=function(){function e(e){this.dialog=e}return e.prototype.openDialog=function(){this.dialog.open(te)},e}();ee.decorators=[{type:t.Component,args:[{selector:"dialog-elements-example",template:'<button md-button (click)="openDialog()">Launch dialog</button>'}]}],ee.ctorParameters=function(){return[{type:r.MdDialog}]};var te=function(){function e(){}return e}();te.decorators=[{type:t.Component,args:[{selector:"dialog-elements-example-dialog",template:"<h1 md-dialog-title>Dialog with elements</h1><div md-dialog-content>This dialog showcases the title, close, content and actions elements.</div><div md-dialog-actions><button md-button md-dialog-close>Close</button></div>"}]}],te.ctorParameters=function(){return[]};var ae=function(){function e(e){this.dialog=e}return e.prototype.openDialog=function(){var e=this;this.dialog.open(oe,{width:"250px",data:{name:this.name,animal:this.animal}}).afterClosed().subscribe(function(t){console.log("The dialog was closed"),e.animal=t})},e}();ae.decorators=[{type:t.Component,args:[{selector:"dialog-overview-example",template:'<ol><li><md-form-field><input mdInput [(ngModel)]="name" placeholder="What\'s your name?"></md-form-field></li><li><button md-raised-button (click)="openDialog()">Pick one</button></li><li *ngIf="animal">You chose: <i>{{animal}}</i></li></ol>'}]}],ae.ctorParameters=function(){return[{type:r.MdDialog}]};var oe=function(){function e(e,t){this.dialogRef=e,this.data=t}return e.prototype.onNoClick=function(){this.dialogRef.close()},e}();oe.decorators=[{type:t.Component,args:[{selector:"dialog-overview-example-dialog",template:'<h1 md-dialog-title>Hi {{data.name}}</h1><div md-dialog-content><p>What\'s your favorite animal?</p><md-form-field><input mdInput tabindex="1" [(ngModel)]="data.animal"></md-form-field></div><div md-dialog-actions><button md-button [md-dialog-close]="data.animal" tabindex="2">Ok</button> <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button></div>'}]}],oe.ctorParameters=function(){return[{type:r.MdDialogRef},{type:void 0,decorators:[{type:t.Inject,args:[r.MD_DIALOG_DATA]}]}]};var ne=function(){function e(){}return e}();ne.decorators=[{type:t.Component,args:[{selector:"expansion-overview-example",template:'<md-expansion-panel><md-expansion-panel-header><md-panel-title>Personal data</md-panel-title><md-panel-description>Type your name and age</md-panel-description></md-expansion-panel-header><md-form-field><input mdInput placeholder="First name"></md-form-field><md-form-field><input mdInput placeholder="Age"></md-form-field></md-expansion-panel>'}]}],ne.ctorParameters=function(){return[]};var re=function(){function e(){this.step=0}return e.prototype.setStep=function(e){this.step=e},e.prototype.nextStep=function(){this.step++},e.prototype.prevStep=function(){this.step--},e}();re.decorators=[{type:t.Component,args:[{selector:"expansion-steps-example",template:'<md-accordion class="example-headers-align"><md-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true"><md-expansion-panel-header><md-panel-title>Personal data</md-panel-title><md-panel-description>Type your name and age<md-icon>account_circle</md-icon></md-panel-description></md-expansion-panel-header><md-form-field><input mdInput placeholder="First name"></md-form-field><md-form-field><input mdInput type="number" min="1" placeholder="Age"></md-form-field><md-action-row><button md-button color="primary" (click)="nextStep()">Next</button></md-action-row></md-expansion-panel><md-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true"><md-expansion-panel-header><md-panel-title>Destination</md-panel-title><md-panel-description>Type the country name<md-icon>map</md-icon></md-panel-description></md-expansion-panel-header><md-form-field><input mdInput placeholder="Country"></md-form-field><md-action-row><button md-button color="warn" (click)="prevStep()">Previous</button> <button md-button color="primary" (click)="nextStep()">Next</button></md-action-row></md-expansion-panel><md-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true"><md-expansion-panel-header><md-panel-title>Day of the trip</md-panel-title><md-panel-description>Inform the date you wish to travel<md-icon>date_range</md-icon></md-panel-description></md-expansion-panel-header><md-form-field><input mdInput placeholder="Date" [mdDatepicker]="picker" (focus)="picker.open()" readonly="readonly"></md-form-field><md-datepicker #picker></md-datepicker><md-action-row><button md-button color="warn" (click)="prevStep()">Previous</button> <button md-button color="primary" (click)="nextStep()">End</button></md-action-row></md-expansion-panel></md-accordion>',styles:[".example-headers-align .mat-expansion-panel-header-title,  .example-headers-align .mat-expansion-panel-header-description { flex-basis: 0; } .example-headers-align .mat-expansion-panel-header-description { justify-content: space-between; align-items: center; } "]}]}],re.ctorParameters=function(){return[]};var le=function(){function e(){this.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"}]}return e}();le.decorators=[{type:t.Component,args:[{selector:"grid-list-dynamic-example",template:'<md-grid-list cols="4" rowHeight="100px"><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>'}]}],le.ctorParameters=function(){return[]};var ie=function(){function e(){}return e}();ie.decorators=[{type:t.Component,args:[{selector:"grid-list-overview-example",styles:["md-grid-tile { background: lightblue; } "],template:'<md-grid-list cols="2" rowHeight="2:1"><md-grid-tile>1</md-grid-tile><md-grid-tile>2</md-grid-tile><md-grid-tile>3</md-grid-tile><md-grid-tile>4</md-grid-tile></md-grid-list>'}]}],ie.ctorParameters=function(){return[]};var se=function(){function e(){}return e}();se.decorators=[{type:t.Component,args:[{selector:"icon-overview-example",template:"<md-icon>home</md-icon>"}]}],se.ctorParameters=function(){return[]};var de=function(){function e(e,t){e.addSvgIcon("thumbs-up",t.bypassSecurityTrustResourceUrl("assets/img/examples/thumbup-icon.svg"))}return e}();de.decorators=[{type:t.Component,args:[{selector:"icon-svg-example",template:'<md-icon svgIcon="thumbs-up"></md-icon>'}]}],de.ctorParameters=function(){return[{type:r.MdIconRegistry},{type:c.DomSanitizer}]};var me=function(){function e(){this.value="Clear me"}return e}();me.decorators=[{type:t.Component,args:[{selector:"input-clearable-example",
template:'<md-form-field class="example-form-field"><input mdInput type="text" placeholder="Clearable input" [(ngModel)]="value"> <button md-button *ngIf="value" mdSuffix md-icon-button aria-label="Clear" (click)="value=\'\'"><md-icon>close</md-icon></button></md-form-field>',styles:[".example-form-field { width: 200px; } "]}]}],me.ctorParameters=function(){return[]};var ce=/^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,ue=function(){function e(){this.emailFormControl=new a.FormControl("",[a.Validators.required,a.Validators.pattern(ce)])}return e}();ue.decorators=[{type:t.Component,args:[{selector:"input-errors-example",template:'<form class="example-form"><md-form-field class="example-full-width"><input mdInput placeholder="Email" [formControl]="emailFormControl"><md-error *ngIf="emailFormControl.hasError(\'pattern\')">Please enter a valid email address</md-error><md-error *ngIf="emailFormControl.hasError(\'required\')">Email is <strong>required</strong></md-error></md-form-field></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],ue.ctorParameters=function(){return[]};var pe=function(){function e(){}return e}();pe.decorators=[{type:t.Component,args:[{selector:"input-form-example",template:'<form class="example-form"><md-form-field class="example-full-width"><input mdInput placeholder="Company (disabled)" disabled="disabled" value="Google"></md-form-field><table class="example-full-width" cellspacing="0"><tr><td><md-form-field class="example-full-width"><input mdInput placeholder="First name"></md-form-field></td><td><md-form-field class="example-full-width"><input mdInput placeholder="Long Last Name That Will Be Truncated"></md-form-field></td></tr></table><p><md-form-field class="example-full-width"><textarea mdInput placeholder="Address">1600 Amphitheatre Pkwy</textarea></md-form-field><md-form-field class="example-full-width"><textarea mdInput placeholder="Address 2"></textarea></md-form-field></p><table class="example-full-width" cellspacing="0"><tr><td><md-form-field class="example-full-width"><input mdInput placeholder="City"></md-form-field></td><td><md-form-field class="example-full-width"><input mdInput placeholder="State"></md-form-field></td><td><md-form-field class="example-full-width"><input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043"><md-hint align="end">{{postalCode.value.length}} / 5</md-hint></md-form-field></td></tr></table></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],pe.ctorParameters=function(){return[]};var fe=function(){function e(){}return e}();fe.decorators=[{type:t.Component,args:[{selector:"input-hint-example",template:'<form class="example-form"><md-form-field class="example-full-width"><input mdInput #message maxlength="256" placeholder="Message"><md-hint align="start"><strong>Don\'t disclose personal info</strong></md-hint><md-hint align="end">{{message.value.length}} / 256</md-hint></md-form-field></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],fe.ctorParameters=function(){return[]};var he=function(){function e(){}return e}();he.decorators=[{type:t.Component,args:[{selector:"input-overview-example",styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "],template:'<form class="example-form"><md-form-field class="example-full-width"><input mdInput placeholder="Favorite food" value="Sushi"></md-form-field></form>'}]}],he.ctorParameters=function(){return[]};var ge=function(){function e(){}return e}();ge.decorators=[{type:t.Component,args:[{selector:"input-prefix-suffix-example",template:'<form class="example-form"><md-form-field class="example-full-width"><span mdPrefix>+1 &nbsp;</span> <input type="tel" mdInput placeholder="Telephone"><md-icon mdSuffix>mode_edit</md-icon></md-form-field></form>',styles:[".example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; } "]}]}],ge.ctorParameters=function(){return[]};var be=function(){function e(){}return e}();be.decorators=[{type:t.Component,args:[{selector:"list-overview-example",template:"<md-list><md-list-item>Item 1</md-list-item><md-list-item>Item 2</md-list-item><md-list-item>Item 3</md-list-item></md-list>"}]}],be.ctorParameters=function(){return[]};var xe=function(){function e(){this.folders=[{name:"Photos",updated:new Date("1/1/16")},{name:"Recipes",updated:new Date("1/17/16")},{name:"Work",updated:new Date("1/28/16")}],this.notes=[{name:"Vacation Itinerary",updated:new Date("2/20/16")},{name:"Kitchen Remodel",updated:new Date("1/18/16")}]}return e}();xe.decorators=[{type:t.Component,args:[{selector:"list-sections-example",styles:[".mat-list-icon { color: rgba(0, 0, 0, 0.54); } "],template:'<md-list><h3 md-subheader>Folders</h3><md-list-item *ngFor="let folder of folders"><md-icon md-list-icon>folder</md-icon><h4 md-line>{{folder.name}}</h4><p md-line>{{folder.updated | date}}</p></md-list-item><md-divider></md-divider><h3 md-subheader>Notes</h3><md-list-item *ngFor="let note of notes"><md-icon md-list-icon>note</md-icon><h4 md-line>{{note.name}}</h4><p md-line>{{note.updated | date}}</p></md-list-item></md-list>'}]}],xe.ctorParameters=function(){return[]};var ve=function(){function e(){this.typesOfShoes=["Boots","Clogs","Loafers","Moccasins","Sneakers"]}return e}();ve.decorators=[{type:t.Component,args:[{selector:"list-selection-example",styles:["/** No styles for this example. */ "],template:'<md-selection-list #shoes><md-list-option *ngFor="let shoe of typesOfShoes">{{shoe}}</md-list-option></md-selection-list><p>Options selected: {{shoes.selectedOptions.selected.length}}</p>'}]}],ve.ctorParameters=function(){return[]};var we=function(){function e(){}return e}();we.decorators=[{type:t.Component,args:[{selector:"menu-icons-example",template:'<button md-icon-button [mdMenuTriggerFor]="menu"><md-icon>more_vert</md-icon></button><md-menu #menu="mdMenu"><button md-menu-item><md-icon>dialpad</md-icon><span>Redial</span></button> <button md-menu-item disabled="disabled"><md-icon>voicemail</md-icon><span>Check voicemail</span></button> <button md-menu-item><md-icon>notifications_off</md-icon><span>Disable alerts</span></button></md-menu>',styles:["/** No CSS for this example */ "]}]}],we.ctorParameters=function(){return[]};var ye=function(){function e(){}return e}();ye.decorators=[{type:t.Component,args:[{selector:"menu-overview-example",template:'<button md-button [mdMenuTriggerFor]="menu">Menu</button><md-menu #menu="mdMenu"><button md-menu-item>Item 1</button> <button md-menu-item>Item 2</button></md-menu>',styles:["/** No CSS for this example */ "]}]}],ye.ctorParameters=function(){return[]};var Ce=function(){function e(){}return e}();Ce.decorators=[{type:t.Component,args:[{selector:"nested-menu-example",template:'<button md-button [mdMenuTriggerFor]="animals">Animal index</button><md-menu #animals="mdMenu"><button md-menu-item [mdMenuTriggerFor]="vertebrates">Vertebrates</button> <button md-menu-item [mdMenuTriggerFor]="invertebrates">Invertebrates</button></md-menu><md-menu #vertebrates="mdMenu"><button md-menu-item [mdMenuTriggerFor]="fish">Fishes</button> <button md-menu-item [mdMenuTriggerFor]="amphibians">Amphibians</button> <button md-menu-item [mdMenuTriggerFor]="reptiles">Reptiles</button> <button md-menu-item>Birds</button> <button md-menu-item>Mammals</button></md-menu><md-menu #invertebrates="mdMenu"><button md-menu-item>Insects</button> <button md-menu-item>Molluscs</button> <button md-menu-item>Crustaceans</button> <button md-menu-item>Corals</button> <button md-menu-item>Arachnids</button> <button md-menu-item>Velvet worms</button> <button md-menu-item>Horseshoe crabs</button></md-menu><md-menu #fish="mdMenu"><button md-menu-item>Baikal oilfish</button> <button md-menu-item>Bala shark</button> <button md-menu-item>Ballan wrasse</button> <button md-menu-item>Bamboo shark</button> <button md-menu-item>Banded killifish</button></md-menu><md-menu #amphibians="mdMenu"><button md-menu-item>Sonoran desert toad</button> <button md-menu-item>Western toad</button> <button md-menu-item>Arroyo toad</button> <button md-menu-item>Yosemite toad</button></md-menu><md-menu #reptiles="mdMenu"><button md-menu-item>Banded Day Gecko</button> <button md-menu-item>Banded Gila Monster</button> <button md-menu-item>Black Tree Monitor</button> <button md-menu-item>Blue Spiny Lizard</button> <button md-menu-item disabled="disabled">Velociraptor</button></md-menu>',styles:["/** No CSS for this example */ "]}]}],Ce.ctorParameters=function(){return[]};var ke=function(){function e(){this.length=100,this.pageSize=10,this.pageSizeOptions=[5,10,25,100]}return e.prototype.setPageSizeOptions=function(e){this.pageSizeOptions=e.split(",").map(function(e){return+e})},e}();ke.decorators=[{type:t.Component,args:[{selector:"paginator-configurable-example",template:'<md-form-field>List length: <input mdInput [(ngModel)]="length"></md-form-field><md-form-field>Page size: <input mdInput [(ngModel)]="pageSize"></md-form-field><md-form-field>Page size options: <input mdInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"></md-form-field><md-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event"></md-paginator><div *ngIf="pageEvent"><h5>Page Change Event Properties</h5><div>List length: {{pageEvent.length}}</div><div>Page size: {{pageEvent.pageSize}}</div><div>Page index: {{pageEvent.pageIndex}}</div></div>'}]}],ke.ctorParameters=function(){return[]};var De=function(){function e(){}return e}();De.decorators=[{type:t.Component,args:[{selector:"paginator-overview-example",template:'<md-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></md-paginator>'}]}],De.ctorParameters=function(){return[]};var Se=function(){function e(){this.color="primary",this.mode="determinate",this.value=50,this.bufferValue=75}return e}();Se.decorators=[{type:t.Component,args:[{selector:"progress-bar-configurable-example",template:'<md-card><md-card-content><h2 class="example-h2">Progress bar configuration</h2><section class="example-section"><label class="example-margin">Color:</label><md-radio-group [(ngModel)]="color"><md-radio-button class="example-margin" value="primary">Primary</md-radio-button><md-radio-button class="example-margin" value="accent">Accent</md-radio-button><md-radio-button class="example-margin" value="warn">Warn</md-radio-button></md-radio-group></section><section class="example-section"><label class="example-margin">Mode:</label><md-radio-group [(ngModel)]="mode"><md-radio-button class="example-margin" value="determinate">Determinate</md-radio-button><md-radio-button class="example-margin" value="indeterminate">Indeterminate</md-radio-button><md-radio-button class="example-margin" value="buffer">Buffer</md-radio-button><md-radio-button class="example-margin" value="query">Query</md-radio-button></md-radio-group></section><section class="example-section" *ngIf="mode == \'determinate\' || mode == \'buffer\'"><label class="example-margin">Progress:</label><md-slider class="example-margin" [(ngModel)]="value"></md-slider></section><section class="example-section" *ngIf="mode == \'buffer\'"><label class="example-margin">Buffer:</label><md-slider class="example-margin" [(ngModel)]="bufferValue"></md-slider></section></md-card-content></md-card><md-card><md-card-content><h2 class="example-h2">Result</h2><section class="example-section"><md-progress-bar class="example-margin" [color]="color" [mode]="mode" [value]="value" [bufferValue]="bufferValue"></md-progress-bar></section></md-card-content></md-card>',styles:[".example-h2 { margin: 10px; } .example-section { display: flex; align-content: center; align-items: center; height: 60px; } .example-margin { margin: 0 10px; } "]}]}],Se.ctorParameters=function(){return[]};var Me=function(){function e(){}return e}();Me.decorators=[{type:t.Component,args:[{selector:"progress-bar-overview-example",template:'<md-progress-bar mode="indeterminate"></md-progress-bar>'}]}],Me.ctorParameters=function(){return[]};var Ne=function(){function e(){this.color="primary",this.mode="determinate",this.value=50}return e}();Ne.decorators=[{type:t.Component,args:[{selector:"progress-spinner-configurable-example",template:'<md-card><md-card-content><h2 class="example-h2">Progress spinner configuration</h2><section class="example-section"><label class="example-margin">Color:</label><md-radio-group [(ngModel)]="color"><md-radio-button class="example-margin" value="primary">Primary</md-radio-button><md-radio-button class="example-margin" value="accent">Accent</md-radio-button><md-radio-button class="example-margin" value="warn">Warn</md-radio-button></md-radio-group></section><section class="example-section"><label class="example-margin">Mode:</label><md-radio-group [(ngModel)]="mode"><md-radio-button class="example-margin" value="determinate">Determinate</md-radio-button><md-radio-button class="example-margin" value="indeterminate">Indeterminate</md-radio-button></md-radio-group></section><section class="example-section" *ngIf="mode == \'determinate\'"><label class="example-margin">Progress:</label><md-slider class="example-margin" [(ngModel)]="value"></md-slider></section></md-card-content></md-card><md-card><md-card-content><h2 class="example-h2">Result</h2><md-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value"></md-progress-spinner></md-card-content></md-card>',styles:[".example-h2 { margin: 10px; } .example-section { display: flex; align-content: center; align-items: center; height: 60px; } .example-margin { margin: 0 10px; } "]}]}],Ne.ctorParameters=function(){return[]};var Pe=function(){function e(){}return e}();Pe.decorators=[{type:t.Component,args:[{selector:"progress-spinner-overview-example",template:"<md-spinner></md-spinner>"}]}],Pe.ctorParameters=function(){return[]};var Fe=function(){function e(){this.seasons=["Winter","Spring","Summer","Autumn"]}return e}();Fe.decorators=[{type:t.Component,args:[{selector:"radio-ng-model-example",template:'<md-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason"><md-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">{{season}}</md-radio-button></md-radio-group><div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>',styles:[".example-radio-group { display: inline-flex; flex-direction: column; } .example-radio-button { margin: 5px; } .example-selected-value { margin: 15px 0; } "]}]}],Fe.ctorParameters=function(){return[]};var Ie=function(){function e(){}return e}();Ie.decorators=[{type:t.Component,args:[{selector:"radio-overview-example",template:'<md-radio-group><md-radio-button value="1">Option 1</md-radio-button><md-radio-button value="2">Option 2</md-radio-button></md-radio-group>'}]}],Ie.ctorParameters=function(){return[]};var Oe=function(){function e(){this.foods=[{value:"steak-0",viewValue:"Steak"},{value:"pizza-1",viewValue:"Pizza"},{value:"tacos-2",viewValue:"Tacos"}]}return e}();Oe.decorators=[{type:t.Component,args:[{selector:"select-form-example",template:'<form><md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food"><md-option *ngFor="let food of foods" [value]="food.value">{{food.viewValue}}</md-option></md-select><p>Selected value: {{selectedValue}}</p></form>'}]}],Oe.ctorParameters=function(){return[]};var Te=function(){function e(){this.foods=[{value:"steak-0",viewValue:"Steak"},{value:"pizza-1",viewValue:"Pizza"},{value:"tacos-2",viewValue:"Tacos"}]}return e}();Te.decorators=[{type:t.Component,args:[{selector:"select-overview-example",template:'<md-select placeholder="Favorite food"><md-option *ngFor="let food of foods" [value]="food.value">{{ food.viewValue }}</md-option></md-select>'}]}],Te.ctorParameters=function(){return[]};var Ae=function(){function e(){}return e}();Ae.decorators=[{type:t.Component,args:[{selector:"sidenav-fab-example",template:'<md-sidenav-container class="example-sidenav-fab-container"><md-sidenav #sidenav mode="side" opened="true"><button md-mini-fab class="example-fab" (click)="sidenav.toggle()"><md-icon>add</md-icon></button><div class="example-scrolling-content">Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien consectetuer.</div></md-sidenav><button md-mini-fab class="example-fab" (click)="sidenav.toggle()"><md-icon>add</md-icon></button><div class="example-scrolling-content">Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis,