@angular/material
Version:
Angular Material
1,035 lines (1,029 loc) • 168 kB
JavaScript
/**
* @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 (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(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')) :
typeof define === 'function' && 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'], factory) :
(factory((global.ng = global.ng || {}, global.ng['material-examples'] = global.ng['material-examples'] || {}),global.ng.core,global.ng.forms,global.ng.common,global.ng.cdk.table,global.ng.material,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.ng.cdk.collections,global.Rx,global.Rx.Observable,global.ng.platformBrowser,global.Rx,global.Rx.Observable,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.Rx.Observable,global.ng.http));
}(this, (function (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_platformBrowser,rxjs_Observable,rxjs_add_observable_of,rxjs_add_operator_debounceTime,rxjs_add_operator_distinctUntilChanged,rxjs_add_observable_fromEvent,_angular_http) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var ExampleMaterialModule = (function () {
function ExampleMaterialModule() {
}
return ExampleMaterialModule;
}());
ExampleMaterialModule.decorators = [
{ type: _angular_core.NgModule, args: [{
exports: [
_angular_cdk_table.CdkTableModule,
_angular_material.MdAutocompleteModule,
_angular_material.MdButtonModule,
_angular_material.MdButtonToggleModule,
_angular_material.MdCardModule,
_angular_material.MdCheckboxModule,
_angular_material.MdChipsModule,
_angular_material.MdDatepickerModule,
_angular_material.MdDialogModule,
_angular_material.MdExpansionModule,
_angular_material.MdFormFieldModule,
_angular_material.MdGridListModule,
_angular_material.MdIconModule,
_angular_material.MdInputModule,
_angular_material.MdListModule,
_angular_material.MdMenuModule,
_angular_material.MdProgressBarModule,
_angular_material.MdProgressSpinnerModule,
_angular_material.MdRadioModule,
_angular_material.MdSelectModule,
_angular_material.MdSlideToggleModule,
_angular_material.MdSliderModule,
_angular_material.MdSidenavModule,
_angular_material.MdSnackBarModule,
_angular_material.MdStepperModule,
_angular_material.MdTabsModule,
_angular_material.MdToolbarModule,
_angular_material.MdTooltipModule,
_angular_material.MdPaginatorModule,
_angular_material.MdSortModule,
_angular_material.MdTableModule
]
},] },
];
/**
* @nocollapse
*/
ExampleMaterialModule.ctorParameters = function () { return []; };
var User = (function () {
/**
* @param {?} name
*/
function User(name) {
this.name = name;
}
return User;
}());
/**
* \@title Display value autocomplete
*/
var AutocompleteDisplayExample = (function () {
function AutocompleteDisplayExample() {
this.myControl = new _angular_forms.FormControl();
this.options = [
new User('Mary'),
new User('Shelley'),
new User('Igor')
];
}
/**
* @return {?}
*/
AutocompleteDisplayExample.prototype.ngOnInit = function () {
var _this = this;
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(function (user) { return user && typeof user === 'object' ? user.name : user; })
.map(function (name) { return name ? _this.filter(name) : _this.options.slice(); });
};
/**
* @param {?} name
* @return {?}
*/
AutocompleteDisplayExample.prototype.filter = function (name) {
return this.options.filter(function (option) { return option.name.toLowerCase().indexOf(name.toLowerCase()) === 0; });
};
/**
* @param {?} user
* @return {?}
*/
AutocompleteDisplayExample.prototype.displayFn = function (user) {
return user ? user.name : user;
};
return AutocompleteDisplayExample;
}());
AutocompleteDisplayExample.decorators = [
{ type: _angular_core.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%; } "]
},] },
];
/**
* @nocollapse
*/
AutocompleteDisplayExample.ctorParameters = function () { return []; };
/**
* \@title Filter autocomplete
*/
var AutocompleteFilterExample = (function () {
function AutocompleteFilterExample() {
this.myControl = new _angular_forms.FormControl();
this.options = [
'One',
'Two',
'Three'
];
}
/**
* @return {?}
*/
AutocompleteFilterExample.prototype.ngOnInit = function () {
var _this = this;
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(function (val) { return val ? _this.filter(val) : _this.options.slice(); });
};
/**
* @param {?} val
* @return {?}
*/
AutocompleteFilterExample.prototype.filter = function (val) {
return this.options.filter(function (option) { return option.toLowerCase().indexOf(val.toLowerCase()) === 0; });
};
return AutocompleteFilterExample;
}());
AutocompleteFilterExample.decorators = [
{ type: _angular_core.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%; } "]
},] },
];
/**
* @nocollapse
*/
AutocompleteFilterExample.ctorParameters = function () { return []; };
/**
* \@title Autocomplete overview
*/
var AutocompleteOverviewExample = (function () {
function AutocompleteOverviewExample() {
var _this = this;
this.states = [
{
name: 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name: 'California',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name: 'Florida',
population: '20.27M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name: 'Texas',
population: '27.47M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
this.stateCtrl = new _angular_forms.FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.startWith(null)
.map(function (state) { return state ? _this.filterStates(state) : _this.states.slice(); });
}
/**
* @param {?} name
* @return {?}
*/
AutocompleteOverviewExample.prototype.filterStates = function (name) {
return this.states.filter(function (state) { return state.name.toLowerCase().indexOf(name.toLowerCase()) === 0; });
};
return AutocompleteOverviewExample;
}());
AutocompleteOverviewExample.decorators = [
{ type: _angular_core.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%; } "]
},] },
];
/**
* @nocollapse
*/
AutocompleteOverviewExample.ctorParameters = function () { return []; };
/**
* \@title Simple autocomplete
*/
var AutocompleteSimpleExample = (function () {
function AutocompleteSimpleExample() {
this.myControl = new _angular_forms.FormControl();
this.options = [
'One',
'Two',
'Three'
];
}
return AutocompleteSimpleExample;
}());
AutocompleteSimpleExample.decorators = [
{ type: _angular_core.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%; } "]
},] },
];
/**
* @nocollapse
*/
AutocompleteSimpleExample.ctorParameters = function () { return []; };
/**
* \@title Basic buttons
*/
var ButtonOverviewExample = (function () {
function ButtonOverviewExample() {
}
return ButtonOverviewExample;
}());
ButtonOverviewExample.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'button-overview-example',
template: "<button md-button>Click me!</button>",
},] },
];
/**
* @nocollapse
*/
ButtonOverviewExample.ctorParameters = function () { return []; };
/**
* \@title Exclusive selection
*/
var ButtonToggleExclusiveExample = (function () {
function ButtonToggleExclusiveExample() {
}
return ButtonToggleExclusiveExample;
}());
ButtonToggleExclusiveExample.decorators = [
{ type: _angular_core.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; } "],
},] },
];
/**
* @nocollapse
*/
ButtonToggleExclusiveExample.ctorParameters = function () { return []; };
/**
* \@title Basic button-toggles
*/
var ButtonToggleOverviewExample = (function () {
function ButtonToggleOverviewExample() {
}
return ButtonToggleOverviewExample;
}());
ButtonToggleOverviewExample.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'button-toggle-overview-example',
template: "<md-button-toggle>Toggle me!</md-button-toggle>",
},] },
];
/**
* @nocollapse
*/
ButtonToggleOverviewExample.ctorParameters = function () { return []; };
/**
* \@title Button varieties
*/
var ButtonTypesExample = (function () {
function ButtonTypesExample() {
}
return ButtonTypesExample;
}());
ButtonTypesExample.decorators = [
{ type: _angular_core.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; } "],
},] },
];
/**
* @nocollapse
*/
ButtonTypesExample.ctorParameters = function () { return []; };
/**
* \@title Card with multiple sections
*/
var CardFancyExample = (function () {
function CardFancyExample() {
}
return CardFancyExample;
}());
CardFancyExample.decorators = [
{ type: _angular_core.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; } "],
},] },
];
/**
* @nocollapse
*/
CardFancyExample.ctorParameters = function () { return []; };
/**
* \@title Basic cards
*/
var CardOverviewExample = (function () {
function CardOverviewExample() {
}
return CardOverviewExample;
}());
CardOverviewExample.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'card-overview-example',
template: "<md-card>Simple card</md-card>",
},] },
];
/**
* @nocollapse
*/
CardOverviewExample.ctorParameters = function () { return []; };
/**
* \@title Basic CDK data-table
*/
var CdkTableBasicExample = (function () {
function CdkTableBasicExample() {
this.displayedColumns = ['userId', 'userName', 'progress', 'color'];
this.exampleDatabase = new ExampleDatabase();
}
/**
* @return {?}
*/
CdkTableBasicExample.prototype.ngOnInit = function () {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
};
return CdkTableBasicExample;
}());
CdkTableBasicExample.decorators = [
{ type: _angular_core.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>",
},] },
];
/**
* @nocollapse
*/
CdkTableBasicExample.ctorParameters = function () { return []; };
/**
* Constants used to fill up our data base.
*/
var COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
var NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
/**
* An example database that the data source uses to retrieve data for the table.
*/
var ExampleDatabase = (function () {
function ExampleDatabase() {
/**
* Stream that emits whenever the data has been modified.
*/
this.dataChange = new rxjs_BehaviorSubject.BehaviorSubject([]);
// Fill up the database with 100 users.
for (var i = 0; i < 100; i++) {
this.addUser();
}
}
Object.defineProperty(ExampleDatabase.prototype, "data", {
/**
* @return {?}
*/
get: function () { return this.dataChange.value; },
enumerable: true,
configurable: true
});
/**
* Adds a new user to the database.
* @return {?}
*/
ExampleDatabase.prototype.addUser = function () {
var /** @type {?} */ copiedData = this.data.slice();
copiedData.push(this.createNewUser());
this.dataChange.next(copiedData);
};
/**
* Builds and returns a new User.
* @return {?}
*/
ExampleDatabase.prototype.createNewUser = function () {
var /** @type {?} */ name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: (this.data.length + 1).toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
};
return ExampleDatabase;
}());
/**
* Data source to provide what data should be rendered in the table. Note that the data source
* can retrieve its data in any way. In this case, the data source is provided a reference
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
var ExampleDataSource = (function (_super) {
__extends(ExampleDataSource, _super);
/**
* @param {?} _exampleDatabase
*/
function ExampleDataSource(_exampleDatabase) {
var _this = _super.call(this) || this;
_this._exampleDatabase = _exampleDatabase;
return _this;
}
/**
* Connect function called by the table to retrieve one stream containing the data to render.
* @return {?}
*/
ExampleDataSource.prototype.connect = function () {
return this._exampleDatabase.dataChange;
};
/**
* @return {?}
*/
ExampleDataSource.prototype.disconnect = function () { };
return ExampleDataSource;
}(_angular_cdk_collections.DataSource));
/**
* \@title Configurable checkbox
*/
var CheckboxConfigurableExample = (function () {
function CheckboxConfigurableExample() {
this.checked = false;
this.indeterminate = false;
this.align = 'start';
this.disabled = false;
}
return CheckboxConfigurableExample;
}());
CheckboxConfigurableExample.decorators = [
{ type: _angular_core.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; } "],
},] },
];
/**
* @nocollapse
*/
CheckboxConfigurableExample.ctorParameters = function () { return []; };
/**
* \@title Basic checkboxes
*/
var CheckboxOverviewExample = (function () {
function CheckboxOverviewExample() {
}
return CheckboxOverviewExample;
}());
CheckboxOverviewExample.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'checkbox-overview-example',
template: "<md-checkbox>Check me!</md-checkbox>",
},] },
];
/**
* @nocollapse
*/
CheckboxOverviewExample.ctorParameters = function () { return []; };
var COMMA = 188;
/**
* \@title Chips with input
*/
var ChipsInputExample = (function () {
function ChipsInputExample() {
this.visible = true;
this.selectable = true;
this.removable = true;
this.addOnBlur = true;
// Enter, comma
this.separatorKeysCodes = [_angular_material.ENTER, COMMA];
this.fruits = [
{ name: 'Lemon' },
{ name: 'Lime' },
{ name: 'Apple' },
];
}
/**
* @param {?} event
* @return {?}
*/
ChipsInputExample.prototype.add = function (event) {
var /** @type {?} */ input = event.input;
var /** @type {?} */ value = event.value;
// Add our person
if ((value || '').trim()) {
this.fruits.push({ name: value.trim() });
}
// Reset the input value
if (input) {
input.value = '';
}
};
/**
* @param {?} fruit
* @return {?}
*/
ChipsInputExample.prototype.remove = function (fruit) {
var /** @type {?} */ index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
};
return ChipsInputExample;
}());
ChipsInputExample.decorators = [
{ type: _angular_core.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%}"]
},] },
];
/**
* @nocollapse
*/
ChipsInputExample.ctorParameters = function () { return []; };
/**
* \@title Basic chips
*/
var ChipsOverviewExample = (function () {
function ChipsOverviewExample() {
}
return ChipsOverviewExample;
}());
ChipsOverviewExample.decorators = [
{ type: _angular_core.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 */ "],
},] },
];
/**
* @nocollapse
*/
ChipsOverviewExample.ctorParameters = function () { return []; };
/**
* \@title Stacked chips
*/
var ChipsStackedExample = (function () {
function ChipsStackedExample() {
this.availableColors = [
{ name: 'none', color: '' },
{ name: 'Primary', color: 'primary' },
{ name: 'Accent', color: 'accent' },
{ name: 'Warn', color: 'warn' }
];
}
return ChipsStackedExample;
}());
ChipsStackedExample.decorators = [
{ type: _angular_core.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; } "],
},] },
];
/**
* @nocollapse
*/
ChipsStackedExample.ctorParameters = function () { return []; };
/**
* \@title Datepicker API
*/
var DatepickerApiExample = (function () {
function DatepickerApiExample() {
}
return DatepickerApiExample;
}());
DatepickerApiExample.decorators = [
{ type: _angular_core.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 */ "],
},] },
];
/**
* @nocollapse
*/
DatepickerApiExample.ctorParameters = function () { return []; };
/**
* \@title Datepicker Filter
*/
var DatepickerFilterExample = (function () {
function DatepickerFilterExample() {
this.myFilter = function (d) {
var /** @type {?} */ day = d.getDay();
// Prevent Saturday and Sunday from being selected.
return day !== 0 && day !== 6;
};
}
return DatepickerFilterExample;
}());
DatepickerFilterExample.decorators = [
{ type: _angular_core.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 */ "],
},] },
];
/**
* @nocollapse
*/
DatepickerFilterExample.ctorParameters = function () { return []; };
/**
* \@title Datepicker Min Max
*/
var DatepickerMinMaxExample = (function () {
function DatepickerMinMaxExample() {
this.minDate = new Date(2000, 0, 1);
this.maxDate = new Date(2020, 0, 1);
}
return DatepickerMinMaxExample;
}());
DatepickerMinMaxExample.decorators = [
{ type: _angular_core.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 */ "],
},] },
];
/**
* @nocollapse
*/
DatepickerMinMaxExample.ctorParameters = function () { return []; };
/**
* \@title Basic datepicker
*/
var DatepickerOverviewExample = (function () {
function DatepickerOverviewExample() {
}
return DatepickerOverviewExample;
}());
DatepickerOverviewExample.decorators = [
{ type: _angular_core.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 */ "],
},] },
];
/**
* @nocollapse
*/
DatepickerOverviewExample.ctorParameters = function () { return []; };
/**
* \@title Datepicker start date
*/
var DatepickerStartViewExample = (function () {
function DatepickerStartViewExample() {
this.startDate = new Date(1990, 0, 1);
}
return DatepickerStartViewExample;
}());
DatepickerStartViewExample.decorators = [
{ type: _angular_core.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 */ "],
},] },
];
/**
* @nocollapse
*/
DatepickerStartViewExample.ctorParameters = function () { return []; };
/**
* \@title Datepicker Touch
*/
var DatepickerTouchExample = (function () {
function DatepickerTouchExample() {
}
return DatepickerTouchExample;
}());
DatepickerTouchExample.decorators = [
{ type: _angular_core.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 */ "],
},] },
];
/**
* @nocollapse
*/
DatepickerTouchExample.ctorParameters = function () { return []; };
/**
* \@title Dialog with header, scrollable content and actions
*/
var DialogContentExample = (function () {
/**
* @param {?} dialog
*/
function DialogContentExample(dialog) {
this.dialog = dialog;
}
/**
* @return {?}
*/
DialogContentExample.prototype.openDialog = function () {
var /** @type {?} */ dialogRef = this.dialog.open(DialogContentExampleDialog, {
height: '350px'
});
dialogRef.afterClosed().subscribe(function (result) {
console.log("Dialog result: " + result);
});
};
return DialogContentExample;
}());
DialogContentExample.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'dialog-content-example',
template: "<button md-button (click)=\"openDialog()\">Open dialog</button>",
},] },
];
/**
* @nocollapse
*/
DialogContentExample.ctorParameters = function () { return [
{ type: _angular_material.MdDialog, },
]; };
var DialogContentExampleDialog = (function () {
function DialogContentExampleDialog() {
}
return DialogContentExampleDialog;
}());
DialogContentExampleDialog.decorators = [
{ type: _angular_core.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>",
},] },
];
/**
* @nocollapse
*/
DialogContentExampleDialog.ctorParameters = function () { return []; };
/**
* \@title Injecting data when opening a dialog
*/
var DialogDataExample = (function () {
/**
* @param {?} dialog
*/
function DialogDataExample(dialog) {
this.dialog = dialog;
}
/**
* @return {?}
*/
DialogDataExample.prototype.openDialog = function () {
this.dialog.open(DialogDataExampleDialog, {
data: {
animal: 'panda'
}
});
};
return DialogDataExample;
}());
DialogDataExample.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'dialog-data-example',
template: "<button md-button (click)=\"openDialog()\">Open dialog</button>",
},] },
];
/**
* @nocollapse
*/
DialogDataExample.ctorParameters = function () { return [
{ type: _angular_material.MdDialog, },
]; };
var DialogDataExampleDialog = (function () {
/**
* @param {?} data
*/
function DialogDataExampleDialog(data) {
this.data = data;
}
return DialogDataExampleDialog;
}());
DialogDataExampleDialog.decorators = [
{ type: _angular_core.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'\">✓</span> Panda</li><li><span *ngIf=\"data.animal === 'unicorn'\">✓</span> Unicorn</li><li><span *ngIf=\"data.animal === 'lion'\">✓</span> Lion</li></ul></div>",
},] },
];
/**
* @nocollapse
*/
DialogDataExampleDialog.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: _angular_core.Inject, args: [_angular_material.MD_DIALOG_DATA,] },] },
]; };
/**
* \@title Dialog elements
*/
var DialogElementsExample = (function () {
/**
* @param {?} dialog
*/
function DialogElementsExample(dialog) {
this.dialog = dialog;
}
/**
* @return {?}
*/
DialogElementsExample.prototype.openDialog = function () {
this.dialog.open(DialogElementsExampleDialog);
};
return DialogElementsExample;
}());
DialogElementsExample.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'dialog-elements-example',
template: "<button md-button (click)=\"openDialog()\">Launch dialog</button>",
},] },
];
/**
* @nocollapse
*/
DialogElementsExample.ctorParameters = function () { return [
{ type: _angular_material.MdDialog, },
]; };
var DialogElementsExampleDialog = (function () {
function DialogElementsExampleDialog() {
}
return DialogElementsExampleDialog;
}());
DialogElementsExampleDialog.decorators = [
{ type: _angular_core.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>",
},] },
];
/**
* @nocollapse
*/
DialogElementsExampleDialog.ctorParameters = function () { return []; };
/**
* \@title Dialog Overview
*/
var DialogOverviewExample = (function () {
/**
* @param {?} dialog
*/
function DialogOverviewExample(dialog) {
this.dialog = dialog;
}
/**
* @return {?}
*/
DialogOverviewExample.prototype.openDialog = function () {
var _this = this;
var /** @type {?} */ dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: { name: this.name, animal: this.animal }
});
dialogRef.afterClosed().subscribe(function (result) {
console.log('The dialog was closed');
_this.animal = result;
});
};
return DialogOverviewExample;
}());
DialogOverviewExample.decorators = [
{ type: _angular_core.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>"
},] },
];
/**
* @nocollapse
*/
DialogOverviewExample.ctorParameters = function () { return [
{ type: _angular_material.MdDialog, },
]; };
var DialogOverviewExampleDialog = (function () {
/**
* @param {?} dialogRef
* @param {?} data
*/
function DialogOverviewExampleDialog(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
}
/**
* @return {?}
*/
DialogOverviewExampleDialog.prototype.onNoClick = function () {
this.dialogRef.close();
};
return DialogOverviewExampleDialog;
}());
DialogOverviewExampleDialog.decorators = [
{ type: _angular_core.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>",
},] },
];
/**
* @nocollapse
*/
DialogOverviewExampleDialog.ctorParameters = function () { return [
{ type: _angular_material.MdDialogRef, },
{ type: undefined, decorators: [{ type: _angular_core.Inject, args: [_angular_material.MD_DIALOG_DATA,] },] },
]; };
/**
* \@title Basic expansion panel
*/
var ExpansionOverviewExample = (function () {
function ExpansionOverviewExample() {
}
return ExpansionOverviewExample;
}());
ExpansionOverviewExample.decorators = [
{ type: _angular_core.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>",
},] },
];
/**
* @nocollapse
*/
ExpansionOverviewExample.ctorParameters = function () { return []; };
/**
* \@title Expansion panel as accordion
*/
var ExpansionStepsExample = (function () {
function ExpansionStepsExample() {
this.step = 0;
}
/**
* @param {?} index
* @return {?}
*/
ExpansionStepsExample.prototype.setStep = function (index) {
this.step = index;
};
/**
* @return {?}
*/
ExpansionStepsExample.prototype.nextStep = function () {
this.step++;
};
/**
* @return {?}
*/
ExpansionStepsExample.prototype.prevStep = function () {
this.step--;
};
return ExpansionStepsExample;
}());
ExpansionStepsExample.decorators = [
{ type: _angular_core.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; } "]
},] },
];
/**
* @nocollapse
*/
ExpansionStepsExample.ctorParameters = function () { return []; };
/**
* \@title Dynamic grid-list
*/
var GridListDynamicExample = (function () {
function GridListDynamicExample() {
this.tiles = [
{ text: 'One', cols: 3, rows: 1, color: 'ligh