diff --git a/package.json b/package.json index c071df244..c99d501d7 100644 --- a/package.json +++ b/package.json @@ -16,22 +16,23 @@ }, "private": true, "dependencies": { - "@angular/common": "^2.4.6", - "@angular/compiler": "^2.4.6", - "@angular/core": "^2.4.6", - "@angular/forms": "^2.4.6", - "@angular/http": "^2.4.6", - "@angular/material": "^2.0.0-beta.1", - "@angular/platform-browser": "^2.4.6", - "@angular/platform-browser-dynamic": "^2.4.6", - "@angular/router": "~3.4.6", + "@angular/animations": "^4.0.0", + "@angular/common": "^4.0.0", + "@angular/compiler": "^4.0.0", + "@angular/core": "^4.0.0", + "@angular/forms": "^4.0.0", + "@angular/http": "^4.0.0", + "@angular/material": "^2.0.0-beta.3", + "@angular/platform-browser": "^4.0.0", + "@angular/platform-browser-dynamic": "^4.0.0", + "@angular/router": "~4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", - "zone.js": "^0.7.6" + "zone.js": "^0.7.7" }, "devDependencies": { - "@angular/cli": "^1.0.0-beta.30", - "@angular/compiler-cli": "^2.4.6", + "@angular/cli": "^1.0.0", + "@angular/compiler-cli": "^4.0.0", "@types/jasmine": "^2.5.41", "@types/node": "^7.0.5", "highlight.js": "^9.9.0", @@ -46,6 +47,6 @@ "protractor": "^5.1.1", "ts-node": "^2.0.0", "tslint": "^4.4.2", - "typescript": "~2.0.10" + "typescript": "~2.1.1" } } diff --git a/src/_app-theme.scss b/src/_app-theme.scss index d3b7ce512..f5f7d9890 100644 --- a/src/_app-theme.scss +++ b/src/_app-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/core/theming/theming'; +@import '~@angular/material/theming'; @import './app/pages/homepage/homepage-theme'; @import './app/pages/component-sidenav/component-sidenav-theme'; @import './app/pages/component-viewer/component-viewer-theme'; diff --git a/src/app/app-module.ts b/src/app/app-module.ts index 904715c4b..887e6c730 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -1,4 +1,5 @@ import {BrowserModule} from '@angular/platform-browser'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {NgModule} from '@angular/core'; import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; import {FormsModule} from '@angular/forms'; @@ -35,6 +36,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page- ], imports: [ BrowserModule, + BrowserAnimationsModule, ExampleModule, SharedModule, FormsModule, diff --git a/src/app/examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/app/examples/progress-spinner-configurable/progress-spinner-configurable-example.html index cc2fa1abb..ae5ada8e6 100644 --- a/src/app/examples/progress-spinner-configurable/progress-spinner-configurable-example.html +++ b/src/app/examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -39,11 +39,11 @@

Progress circle configuration

Result

- - + diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts index 0f836554b..b109e1acb 100644 --- a/src/app/material-docs-app.ts +++ b/src/app/material-docs-app.ts @@ -1,5 +1,5 @@ import {Component, ViewEncapsulation} from '@angular/core'; -import {Router} from '@angular/router'; +import {Router, NavigationStart} from '@angular/router'; @Component({ @@ -16,7 +16,7 @@ export class MaterialDocsApp { showShadow = false; constructor(router: Router) { - router.events.subscribe(data => { + router.events.subscribe((data: NavigationStart) => { this.showShadow = data.url.startsWith('/components'); }); } diff --git a/src/app/pages/component-list/component-list.scss b/src/app/pages/component-list/component-list.scss index cca304083..f25a3f991 100644 --- a/src/app/pages/component-list/component-list.scss +++ b/src/app/pages/component-list/component-list.scss @@ -1,4 +1,3 @@ -@import '~@angular/material/button/button-base'; @import '../../../styles/constants'; .docs-component-list-category { diff --git a/src/app/pages/component-sidenav/_component-sidenav-theme.scss b/src/app/pages/component-sidenav/_component-sidenav-theme.scss index a31d537ad..edb5eed9e 100644 --- a/src/app/pages/component-sidenav/_component-sidenav-theme.scss +++ b/src/app/pages/component-sidenav/_component-sidenav-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/core/theming/theming'; +@import '~@angular/material/theming'; @mixin component-viewer-sidenav-theme($theme) { $primary: map-get($theme, primary); diff --git a/src/app/pages/component-viewer/_component-viewer-theme.scss b/src/app/pages/component-viewer/_component-viewer-theme.scss index 33a5fc237..abadd9642 100644 --- a/src/app/pages/component-viewer/_component-viewer-theme.scss +++ b/src/app/pages/component-viewer/_component-viewer-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/core/theming/theming'; +@import '~@angular/material/theming'; @mixin component-viewer-theme($theme) { $primary: map-get($theme, primary); diff --git a/src/app/pages/guide-viewer/guide-viewer.scss b/src/app/pages/guide-viewer/guide-viewer.scss index aa3216e3e..8774d5bed 100644 --- a/src/app/pages/guide-viewer/guide-viewer.scss +++ b/src/app/pages/guide-viewer/guide-viewer.scss @@ -1,4 +1,4 @@ -@import "~@angular/material/core/style/variables"; +@import "~@angular/material/theming"; /* For desktop, the content should be aligned with the page title. */ $guide-content-margin-side: 70px; diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html index 4785e6553..fd20b857e 100644 --- a/src/app/shared/example-viewer/example-viewer.html +++ b/src/app/shared/example-viewer/example-viewer.html @@ -26,6 +26,6 @@
- +
diff --git a/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.css b/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.html b/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.html new file mode 100644 index 000000000..e5217f9c2 --- /dev/null +++ b/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.html @@ -0,0 +1,9 @@ + + + + + + + {{ state }} + + \ No newline at end of file diff --git a/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.ts b/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.ts new file mode 100644 index 000000000..7b28b28b9 --- /dev/null +++ b/src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.ts @@ -0,0 +1,78 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import 'rxjs/add/operator/startWith'; + +@Component({ + selector: 'autocomplete-overview-example', + templateUrl: './autocomplete-overview-example.html', +}) +export class AutocompleteOverviewExample { + stateCtrl: FormControl; + filteredStates: any; + + states = [ + 'Alabama', + 'Alaska', + 'Arizona', + 'Arkansas', + 'California', + 'Colorado', + 'Connecticut', + 'Delaware', + 'Florida', + 'Georgia', + 'Hawaii', + 'Idaho', + 'Illinois', + 'Indiana', + 'Iowa', + 'Kansas', + 'Kentucky', + 'Louisiana', + 'Maine', + 'Maryland', + 'Massachusetts', + 'Michigan', + 'Minnesota', + 'Mississippi', + 'Missouri', + 'Montana', + 'Nebraska', + 'Nevada', + 'New Hampshire', + 'New Jersey', + 'New Mexico', + 'New York', + 'North Carolina', + 'North Dakota', + 'Ohio', + 'Oklahoma', + 'Oregon', + 'Pennsylvania', + 'Rhode Island', + 'South Carolina', + 'South Dakota', + 'Tennessee', + 'Texas', + 'Utah', + 'Vermont', + 'Virginia', + 'Washington', + 'West Virginia', + 'Wisconsin', + 'Wyoming', + ]; + + constructor() { + this.stateCtrl = new FormControl(); + this.filteredStates = this.stateCtrl.valueChanges + .startWith(null) + .map(name => this.filterStates(name)); + } + + filterStates(val: string) { + return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s)) + : this.states; + } + +} diff --git a/src/assets/plunker/examples/icon-svg-example/icon-svg-example.css b/src/assets/plunker/examples/icon-svg/icon-svg-example.css similarity index 100% rename from src/assets/plunker/examples/icon-svg-example/icon-svg-example.css rename to src/assets/plunker/examples/icon-svg/icon-svg-example.css diff --git a/src/assets/plunker/examples/icon-svg-example/icon-svg-example.html b/src/assets/plunker/examples/icon-svg/icon-svg-example.html similarity index 100% rename from src/assets/plunker/examples/icon-svg-example/icon-svg-example.html rename to src/assets/plunker/examples/icon-svg/icon-svg-example.html diff --git a/src/assets/plunker/examples/icon-svg-example/icon-svg-example.ts b/src/assets/plunker/examples/icon-svg/icon-svg-example.ts similarity index 100% rename from src/assets/plunker/examples/icon-svg-example/icon-svg-example.ts rename to src/assets/plunker/examples/icon-svg/icon-svg-example.ts diff --git a/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html index cc2fa1abb..ae5ada8e6 100644 --- a/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html +++ b/src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -39,11 +39,11 @@

Progress circle configuration

Result

- - + diff --git a/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.css b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.css new file mode 100644 index 000000000..fa7dc6749 --- /dev/null +++ b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.css @@ -0,0 +1,3 @@ +.example-pizza-party { + color: hotpink; +} diff --git a/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts index 03ef19e8a..c78582729 100644 --- a/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts +++ b/src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts @@ -20,6 +20,6 @@ export class SnackBarComponentExample { @Component({ selector: 'snack-bar-component-example-snack', templateUrl: './snack-bar-component-example-snack.html', - styleUrls: ['./snack-bar-component-example-snack.css'], + styleUrls: ['./snack-bar-component-example.css'], }) export class PizzaPartyComponent {} diff --git a/src/main.scss b/src/main.scss index 584b4a7c5..098d40199 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/core/theming/all-theme'; +@import '~@angular/material/theming'; @import './app-theme'; @import './styles/typography'; diff --git a/src/styles/_typography-theme.scss b/src/styles/_typography-theme.scss index 39f00fe18..496f21123 100644 --- a/src/styles/_typography-theme.scss +++ b/src/styles/_typography-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/core/theming/theming'; +@import '~@angular/material/theming'; @mixin docs-site-typography-theme($theme) { $primary: map-get($theme, primary);