From 603ba25f558be0ea1539b226df4c37ca352d3e29 Mon Sep 17 00:00:00 2001
From: Justin DuJardin
Date: Sun, 20 Mar 2016 11:36:47 -0700
Subject: [PATCH] feat(angular2): update to beta 11
- reformat code and optimize imports
- carefully manage setTimeout/clearTimeout calls due to zone.js nit-picky exceptions being thrown
- use >= to be even more generous about which peer deps to install. can revisit if this causes more errors
- work around errors on canary by not using *ngIf or *ngFor in Dynamic component loader cases.
---
examples/all.ts | 29 +-
examples/app.scss | 6 +-
examples/app.ts | 14 +-
examples/components/button/basic_usage.html | 53 ++--
examples/components/button/basic_usage.ts | 4 +-
examples/components/card/action_buttons.scss | 3 +-
examples/components/card/action_buttons.ts | 4 +-
examples/components/card/basic_usage.scss | 3 +-
examples/components/card/basic_usage.ts | 4 +-
examples/components/card/inline_actions.scss | 2 +-
examples/components/card/inline_actions.ts | 4 +-
examples/components/checkbox/basic_usage.scss | 8 +-
examples/components/checkbox/basic_usage.ts | 4 +-
examples/components/checkbox/syncing.ts | 4 +-
examples/components/dialog/basic_usage.html | 5 +-
examples/components/dialog/basic_usage.ts | 6 +-
examples/components/input/basic_usage.scss | 2 +-
examples/components/input/basic_usage.ts | 6 +-
examples/components/input/form_builder.ts | 13 +-
examples/components/list/basic_usage.ts | 4 +-
.../progress_circular/basic_usage.html | 4 +-
.../progress_circular/basic_usage.ts | 10 +-
.../components/progress_linear/basic_usage.ts | 4 +-
examples/components/radio/basic_usage.ts | 4 +-
examples/components/sidenav/basic_usage.ts | 4 +-
examples/components/switch/basic_usage.ts | 6 +-
examples/components/tabs/dynamic_height.html | 64 ++--
examples/components/tabs/dynamic_height.ts | 4 +-
examples/components/tabs/dynamic_tabs.html | 4 +-
examples/components/tabs/dynamic_tabs.ts | 10 +-
examples/components/toolbar/basic_usage.ts | 4 +-
.../components/toolbar/scroll_shrink.scss | 1 +
examples/components/toolbar/scroll_shrink.ts | 12 +-
.../components/whiteframe/basic_usage.html | 72 +++--
.../components/whiteframe/basic_usage.scss | 9 +-
examples/components/whiteframe/basic_usage.ts | 4 +-
examples/example.scss | 1 -
examples/example.ts | 28 +-
examples/highlight.scss | 3 +-
examples/highlight.ts | 5 +-
examples/routes/component.ts | 8 +-
examples/routes/index.html | 27 +-
examples/services/components.ts | 23 +-
examples/services/navigation.ts | 6 +-
examples/services/version.ts | 7 +-
karma.conf.js | 21 +-
ng2-material/all.ts | 62 ++--
ng2-material/components/backdrop/backdrop.ts | 4 +-
ng2-material/components/button/button.scss | 20 +-
ng2-material/components/button/button.ts | 9 +-
ng2-material/components/checkbox/checkbox.ts | 12 +-
ng2-material/components/content/content.scss | 3 +-
ng2-material/components/dialog/dialog.ts | 1 -
.../components/dialog/dialog_basic.ts | 29 +-
.../components/dialog/dialog_config.ts | 2 -
.../components/dialog/dialog_container.ts | 9 +-
ng2-material/components/dialog/dialog_ref.ts | 12 +-
ng2-material/components/divider/divider.scss | 4 +-
ng2-material/components/divider/divider.ts | 5 +-
ng2-material/components/form/messages.ts | 20 +-
ng2-material/components/form/validators.ts | 43 +--
ng2-material/components/icon/icon.ts | 2 +-
ng2-material/components/ink/ink.ts | 3 +-
ng2-material/components/input/input.scss | 1 -
ng2-material/components/input/input.ts | 1 -
ng2-material/components/list/list.scss | 36 +--
ng2-material/components/list/list.ts | 15 +-
ng2-material/components/peekaboo/peekaboo.ts | 30 +-
.../progress_circular/progress_circular.ts | 23 +-
.../progress_linear/progress_linear.ts | 29 +-
.../components/radio/radio_button.scss | 7 +-
ng2-material/components/radio/radio_button.ts | 24 +-
.../components/radio/radio_dispatcher.ts | 2 +-
ng2-material/components/sidenav/sidenav.scss | 1 -
.../components/sidenav/sidenav_service.ts | 4 +-
.../components/subheader/subheader.scss | 2 +-
.../components/subheader/subheader.ts | 4 +-
ng2-material/components/switcher/switch.scss | 4 +-
ng2-material/components/switcher/switch.ts | 4 +-
ng2-material/components/tabs/tabs.ts | 34 +-
ng2-material/components/toolbar/toolbar.scss | 2 +-
ng2-material/components/toolbar/toolbar.ts | 18 +-
.../components/whiteframe/whiteframe.scss | 27 +-
ng2-material/core/key_codes.ts | 14 +-
ng2-material/core/style/default-theme.scss | 2 -
ng2-material/core/style/layout.scss | 298 +++++++++++-------
ng2-material/core/style/palette.scss | 2 -
ng2-material/core/style/shadows.scss | 4 +-
ng2-material/core/style/structure.scss | 15 +-
ng2-material/core/style/theme-functions.scss | 2 -
ng2-material/core/style/typography.scss | 12 +-
ng2-material/core/style/variables.scss | 40 +--
ng2-material/core/util/animate.ts | 46 ++-
ng2-material/core/util/media.ts | 8 +-
ng2-material/core/util/util.ts | 9 +-
ng2-material/webpack_all.ts | 4 +-
ng2-material/webpack_styles.ts | 2 +-
package.json | 10 +-
test/bootstrap.ts | 5 +-
test/components/backdrop/backdrop_spec.ts | 11 +-
test/components/button/button_spec.ts | 2 +-
test/components/checkbox/checkbox_spec.ts | 8 +-
test/components/dialog/dialog_spec.ts | 2 +-
test/components/form/messages_spec.ts | 8 +-
test/components/form/validators_spec.ts | 2 +-
test/components/ink/ink_spec.ts | 2 +-
test/components/input/input_spec.ts | 15 +-
test/components/peekaboo/peekaboo_spec.ts | 8 +-
.../progress_circular_spec.ts | 8 +-
.../progress_linear/progress_linear_spec.ts | 8 +-
test/components/radio/radio_spec.ts | 2 +-
.../sidenav/sidenav_service_spec.ts | 8 +-
test/components/sidenav/sidenav_spec.ts | 12 +-
test/components/tabs/tabs_spec.ts | 8 +-
test/components/toolbar/toolbar_spec.ts | 2 +-
test/test_url_resolver.ts | 2 +-
test/util.ts | 2 +-
117 files changed, 874 insertions(+), 740 deletions(-)
diff --git a/examples/all.ts b/examples/all.ts
index 14480ef5..d24f6fb8 100644
--- a/examples/all.ts
+++ b/examples/all.ts
@@ -1,21 +1,20 @@
// TODO(jd): auto generate import/exports for examples during the grunt site-meta task.
-import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
-
-import CardBasicUsage from './components/card/basic_usage';
-import CardInlineActions from './components/card/inline_actions';
-import ButtonBasicUsage from './components/button/basic_usage';
-import CardActionButtons from './components/card/action_buttons';
-import DialogBasicUsage from './components/dialog/basic_usage';
-import ToolbarBasicUsage from './components/toolbar/basic_usage';
-import ToolbarScrollShrink from './components/toolbar/scroll_shrink';
-import ProgressLinearBasicUsage from './components/progress_linear/basic_usage';
-import ProgressCircularBasicUsage from './components/progress_circular/basic_usage';
-import RadioBasicUsage from './components/radio/basic_usage';
-import SwitchBasicUsage from './components/switch/basic_usage';
-import TabsDynamicHeight from './components/tabs/dynamic_height';
-import TabsDynamicTabs from './components/tabs/dynamic_tabs';
+import {CONST_EXPR, Type} from "angular2/src/facade/lang";
+import CardBasicUsage from "./components/card/basic_usage";
+import CardInlineActions from "./components/card/inline_actions";
+import ButtonBasicUsage from "./components/button/basic_usage";
+import CardActionButtons from "./components/card/action_buttons";
+import DialogBasicUsage from "./components/dialog/basic_usage";
+import ToolbarBasicUsage from "./components/toolbar/basic_usage";
+import ToolbarScrollShrink from "./components/toolbar/scroll_shrink";
+import ProgressLinearBasicUsage from "./components/progress_linear/basic_usage";
+import ProgressCircularBasicUsage from "./components/progress_circular/basic_usage";
+import RadioBasicUsage from "./components/radio/basic_usage";
+import SwitchBasicUsage from "./components/switch/basic_usage";
+import TabsDynamicHeight from "./components/tabs/dynamic_height";
+import TabsDynamicTabs from "./components/tabs/dynamic_tabs";
import CheckboxBasicUsage from "./components/checkbox/basic_usage";
import CheckboxSyncing from "./components/checkbox/syncing";
import ListBasicUsage from "./components/list/basic_usage";
diff --git a/examples/app.scss b/examples/app.scss
index cdc685a8..a8754e90 100644
--- a/examples/app.scss
+++ b/examples/app.scss
@@ -16,13 +16,13 @@ demos-app {
.app-menu {
border-right: 1px solid md-color($md-foreground, divider);
md-list-item {
- font-size:$subheader-font-size;
- font-weight:$subheader-font-weight;
+ font-size: $subheader-font-size;
+ font-weight: $subheader-font-weight;
cursor: pointer;
will-change: color;
transition: color $swift-ease-in-duration $swift-ease-in-timing-function;
&.md-active {
- color: md-color($md-primary,500);
+ color: md-color($md-primary, 500);
}
}
md-toolbar {
diff --git a/examples/app.ts b/examples/app.ts
index 9c26afc8..e74c5bc5 100644
--- a/examples/app.ts
+++ b/examples/app.ts
@@ -1,4 +1,4 @@
-import {Component, View, enableProdMode, bind, Input, OnDestroy, ApplicationRef} from "angular2/core";
+import {Component, enableProdMode, bind, Input, OnDestroy, ApplicationRef} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {
ROUTER_PROVIDERS,
@@ -24,11 +24,11 @@ import {Media} from "ng2-material/core/util/media";
* Describe an example that can be dynamically loaded.
*/
export interface IExampleData {
- template:string;
- source:string;
- styles:string;
- component:string;
- name:string;
+ template: string;
+ source: string;
+ styles: string;
+ component: string;
+ name: string;
}
@RouteConfig([
@@ -91,7 +91,7 @@ export class DemosApp implements OnDestroy {
this._sidenav.show('menu');
}
- navigate(to:any) {
+ navigate(to: any) {
this.router.navigate(to);
}
diff --git a/examples/components/button/basic_usage.html b/examples/components/button/basic_usage.html
index 4c80f63b..6d5d611f 100644
--- a/examples/components/button/basic_usage.html
+++ b/examples/components/button/basic_usage.html
@@ -1,4 +1,3 @@
-
-
- cake
-
+
+ cake
+
-
- android
-
+
+ android
+
-
- comment
-
+
+ comment
+
-
- people
-
+
+ people
+
-
- cake
-
+
+ cake
+
-
- android
-
+
+ android
+
FAB
@@ -71,11 +70,11 @@
more_vert
+ title="Launch Google.com in new window"
+ target="_blank"
+ disabled="true"
+ aria-label="Google.com"
+ class="md-icon-button launch">
launch
Icon Button
diff --git a/examples/components/button/basic_usage.ts b/examples/components/button/basic_usage.ts
index ca9c0aa4..66ec1351 100644
--- a/examples/components/button/basic_usage.ts
+++ b/examples/components/button/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
diff --git a/examples/components/card/action_buttons.scss b/examples/components/card/action_buttons.scss
index b7ef04cd..2c979934 100644
--- a/examples/components/card/action_buttons.scss
+++ b/examples/components/card/action_buttons.scss
@@ -1,6 +1,7 @@
[md-button] [md-icon] {
- color: rgba(0,0,0,0.8);
+ color: rgba(0, 0, 0, 0.8);
}
+
md-card-content {
p {
margin-bottom: 15px;
diff --git a/examples/components/card/action_buttons.ts b/examples/components/card/action_buttons.ts
index 4c8e5cd1..ed158ed8 100644
--- a/examples/components/card/action_buttons.ts
+++ b/examples/components/card/action_buttons.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'card-action-buttons',
diff --git a/examples/components/card/basic_usage.scss b/examples/components/card/basic_usage.scss
index 4b39c567..1423dad2 100644
--- a/examples/components/card/basic_usage.scss
+++ b/examples/components/card/basic_usage.scss
@@ -2,6 +2,7 @@
.card-media {
background-color: #999999;
}
+
[md-button] [md-icon] {
- color: rgba(0,0,0,0.8);
+ color: rgba(0, 0, 0, 0.8);
}
diff --git a/examples/components/card/basic_usage.ts b/examples/components/card/basic_usage.ts
index d1f0b829..c3870fcd 100644
--- a/examples/components/card/basic_usage.ts
+++ b/examples/components/card/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'card-basic-usage',
diff --git a/examples/components/card/inline_actions.scss b/examples/components/card/inline_actions.scss
index b2d05b09..04aa3c5a 100644
--- a/examples/components/card/inline_actions.scss
+++ b/examples/components/card/inline_actions.scss
@@ -1,3 +1,3 @@
[md-button] [md-icon] {
- color: rgba(0,0,0,0.8);
+ color: rgba(0, 0, 0, 0.8);
}
diff --git a/examples/components/card/inline_actions.ts b/examples/components/card/inline_actions.ts
index 5ef5bd21..e4c32fa9 100644
--- a/examples/components/card/inline_actions.ts
+++ b/examples/components/card/inline_actions.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'card-inline-actions',
diff --git a/examples/components/checkbox/basic_usage.scss b/examples/components/checkbox/basic_usage.scss
index 2730b1ad..1f1e1bd5 100644
--- a/examples/components/checkbox/basic_usage.scss
+++ b/examples/components/checkbox/basic_usage.scss
@@ -1,23 +1,29 @@
div.flex-xs {
- min-height:40px;
+ min-height: 40px;
}
+
.checkboxDemo1 div {
clear: both;
}
+
.checkboxDemo1 md-checkbox {
float: left;
}
+
p {
padding-left: 8px;
}
+
fieldset.standard {
border-style: solid;
border-width: 1px;
}
+
legend {
color: #3F51B5;
}
+
legend code {
color: #3F51B5;
font-weight: normal;
diff --git a/examples/components/checkbox/basic_usage.ts b/examples/components/checkbox/basic_usage.ts
index 499612fe..5e3175e2 100644
--- a/examples/components/checkbox/basic_usage.ts
+++ b/examples/components/checkbox/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'checkbox-basic-usage',
diff --git a/examples/components/checkbox/syncing.ts b/examples/components/checkbox/syncing.ts
index d77d7364..4a5edd27 100644
--- a/examples/components/checkbox/syncing.ts
+++ b/examples/components/checkbox/syncing.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'checkbox-syncing',
diff --git a/examples/components/dialog/basic_usage.html b/examples/components/dialog/basic_usage.html
index b4de8e66..c204585c 100644
--- a/examples/components/dialog/basic_usage.html
+++ b/examples/components/dialog/basic_usage.html
@@ -15,8 +15,9 @@
Custom Dialog
- Custom Dialog Fullscreen
-
+ Custom Dialog Fullscreen
+
+
Tab Dialog
diff --git a/examples/components/dialog/basic_usage.ts b/examples/components/dialog/basic_usage.ts
index 9f05867a..325652ca 100644
--- a/examples/components/dialog/basic_usage.ts
+++ b/examples/components/dialog/basic_usage.ts
@@ -1,7 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES,MdDialog} from 'ng2-material/all';
-import {ElementRef} from "angular2/core";
-import {Input} from "angular2/core";
+import {Component, ElementRef} from "angular2/core";
+import {MATERIAL_DIRECTIVES, MdDialog} from "ng2-material/all";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {MdDialogConfig, MdDialogBasic, MdDialogRef} from "ng2-material/components/dialog/dialog";
import {Media} from "../../../ng2-material/core/util/media";
diff --git a/examples/components/input/basic_usage.scss b/examples/components/input/basic_usage.scss
index d694abea..3533b46d 100644
--- a/examples/components/input/basic_usage.scss
+++ b/examples/components/input/basic_usage.scss
@@ -6,7 +6,7 @@
width: 256px;
height: 256px;
font-size: 256px;
- color: md-color($md-primary,900,0.6);
+ color: md-color($md-primary, 900, 0.6);
}
md-toolbar[md-hero] {
diff --git a/examples/components/input/basic_usage.ts b/examples/components/input/basic_usage.ts
index be7c9abd..1c923600 100644
--- a/examples/components/input/basic_usage.ts
+++ b/examples/components/input/basic_usage.ts
@@ -1,6 +1,6 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
-import {FORM_DIRECTIVES, Validators} from 'angular2/common';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+import {FORM_DIRECTIVES} from "angular2/common";
@Component({
selector: 'input-basic-usage',
diff --git a/examples/components/input/form_builder.ts b/examples/components/input/form_builder.ts
index 54451287..0ce8cda7 100644
--- a/examples/components/input/form_builder.ts
+++ b/examples/components/input/form_builder.ts
@@ -1,6 +1,12 @@
-import {View, Component} from 'angular2/core';
-import {MdPatternValidator, MdMinValueValidator, MdNumberRequiredValidator, MdMaxValueValidator, MATERIAL_DIRECTIVES} from 'ng2-material/all';
-import {FORM_DIRECTIVES, Validators, FormBuilder, ControlGroup} from 'angular2/common';
+import {Component} from "angular2/core";
+import {
+ MdPatternValidator,
+ MdMinValueValidator,
+ MdNumberRequiredValidator,
+ MdMaxValueValidator,
+ MATERIAL_DIRECTIVES
+} from "ng2-material/all";
+import {FORM_DIRECTIVES, Validators, FormBuilder, ControlGroup} from "angular2/common";
@Component({
selector: 'input-form-builder',
@@ -16,6 +22,7 @@ export default class InputFormBuilder {
description: 'Nuclear Missile Defense System',
rate: 500
};
+
constructor(fb: FormBuilder) {
this.projectForm = fb.group({
'clientName': ['', Validators.required],
diff --git a/examples/components/list/basic_usage.ts b/examples/components/list/basic_usage.ts
index fa285dc0..74a1b007 100644
--- a/examples/components/list/basic_usage.ts
+++ b/examples/components/list/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
let imagePath = 'public/images/avatars/avatar11.svg';
diff --git a/examples/components/progress_circular/basic_usage.html b/examples/components/progress_circular/basic_usage.html
index 00ff98cb..d427597e 100644
--- a/examples/components/progress_circular/basic_usage.html
+++ b/examples/components/progress_circular/basic_usage.html
@@ -2,7 +2,7 @@
Determinate
For operations where the percentage of the operation completed can be determined, use a determinate indicator. They
- give users a quick sense of how long an operation will take.
+ give users a quick sense of how long an operation will take.
@@ -10,7 +10,7 @@ Determinate
Indeterminate
For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to
- expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
+ expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
diff --git a/examples/components/progress_circular/basic_usage.ts b/examples/components/progress_circular/basic_usage.ts
index 3e146d98..995054da 100644
--- a/examples/components/progress_circular/basic_usage.ts
+++ b/examples/components/progress_circular/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'progress-circular-basic-usage',
@@ -8,9 +8,9 @@ import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
directives: [MATERIAL_DIRECTIVES]
})
export default class ProgressCircularBasicUsage {
- public determinateValue:number = 30;
- public deactivated:boolean = false;
- public mode:string;
+ public determinateValue: number = 30;
+ public deactivated: boolean = false;
+ public mode: string;
constructor() {
// Iterate every 100ms, non-stop
diff --git a/examples/components/progress_linear/basic_usage.ts b/examples/components/progress_linear/basic_usage.ts
index b316aabb..cf7f677a 100644
--- a/examples/components/progress_linear/basic_usage.ts
+++ b/examples/components/progress_linear/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'progress-linear-basic-usage',
diff --git a/examples/components/radio/basic_usage.ts b/examples/components/radio/basic_usage.ts
index 015fbfc7..95229037 100644
--- a/examples/components/radio/basic_usage.ts
+++ b/examples/components/radio/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
// TODO (jdd):
diff --git a/examples/components/sidenav/basic_usage.ts b/examples/components/sidenav/basic_usage.ts
index c950f8a5..b44a5923 100644
--- a/examples/components/sidenav/basic_usage.ts
+++ b/examples/components/sidenav/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES, Media, SidenavService} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES, Media, SidenavService} from "ng2-material/all";
@Component({
diff --git a/examples/components/switch/basic_usage.ts b/examples/components/switch/basic_usage.ts
index 4c59ee28..9d16e18a 100644
--- a/examples/components/switch/basic_usage.ts
+++ b/examples/components/switch/basic_usage.ts
@@ -1,9 +1,9 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'switch-basic-usage',
- templateUrl: 'examples/components/switch/basic_usage.html',
+ templateUrl: 'examples/components/switch/basic_usage.html',
directives: [MATERIAL_DIRECTIVES]
})
export default class SwitchBasicUsage {
diff --git a/examples/components/tabs/dynamic_height.html b/examples/components/tabs/dynamic_height.html
index 3a9f7610..c28a90be 100644
--- a/examples/components/tabs/dynamic_height.html
+++ b/examples/components/tabs/dynamic_height.html
@@ -1,22 +1,42 @@
-
-
-
- Tab One
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
-
-
-
-
- Tab Two
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.
- Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.
- Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
-
-
-
-
- Tab Three
- Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
-
-
-
+
+
+
+ Tab One
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque
+ ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est,
+ sollicitudin consectetur felis nec, feugiat ultricies mi.
+
+
+
+
+ Tab Two
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque
+ ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est,
+ sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in
+ ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante
+ varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a
+ facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis
+ risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum
+ ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus
+ porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.
+ Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec
+ posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus
+ faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero,
+ viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc
+ leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.
+ Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum.
+ Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum
+ nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus
+ commodo lectus.
+
+
+
+
+ Tab Three
+ Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum.
+ Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum
+ nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus
+ commodo lectus.
+
+
+
diff --git a/examples/components/tabs/dynamic_height.ts b/examples/components/tabs/dynamic_height.ts
index 0deae86e..f03d22cd 100644
--- a/examples/components/tabs/dynamic_height.ts
+++ b/examples/components/tabs/dynamic_height.ts
@@ -1,5 +1,5 @@
-import {View, Component, ViewEncapsulation} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component, ViewEncapsulation} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'tabs-dynamic-height',
diff --git a/examples/components/tabs/dynamic_tabs.html b/examples/components/tabs/dynamic_tabs.html
index bbe6e472..ef4d6935 100644
--- a/examples/components/tabs/dynamic_tabs.html
+++ b/examples/components/tabs/dynamic_tabs.html
@@ -1,8 +1,8 @@
+ [disabled]="tab.disabled"
+ [label]="tab.title">
{{ tab.content }}
diff --git a/examples/components/tabs/dynamic_tabs.ts b/examples/components/tabs/dynamic_tabs.ts
index 3a78e8e8..3d19b793 100644
--- a/examples/components/tabs/dynamic_tabs.ts
+++ b/examples/components/tabs/dynamic_tabs.ts
@@ -1,10 +1,10 @@
-import {View, Component, Input, ViewEncapsulation} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component, Input, ViewEncapsulation} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
export interface ITabData {
- title:string;
- content:string;
- disabled?:boolean;
+ title: string;
+ content: string;
+ disabled?: boolean;
}
@Component({
diff --git a/examples/components/toolbar/basic_usage.ts b/examples/components/toolbar/basic_usage.ts
index b06dc4b7..763ba736 100644
--- a/examples/components/toolbar/basic_usage.ts
+++ b/examples/components/toolbar/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'toolbar-basic-usage',
diff --git a/examples/components/toolbar/scroll_shrink.scss b/examples/components/toolbar/scroll_shrink.scss
index 6668e2a1..fb962ac8 100644
--- a/examples/components/toolbar/scroll_shrink.scss
+++ b/examples/components/toolbar/scroll_shrink.scss
@@ -1,4 +1,5 @@
@import "../../../ng2-material/core/style/variables";
+
div.scroll-shrink {
height: 600px;
overflow-y: hidden;
diff --git a/examples/components/toolbar/scroll_shrink.ts b/examples/components/toolbar/scroll_shrink.ts
index 3011f5ba..c9329636 100644
--- a/examples/components/toolbar/scroll_shrink.ts
+++ b/examples/components/toolbar/scroll_shrink.ts
@@ -1,11 +1,11 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
interface ITodo {
- face:string;
- what:string;
- who:string;
- notes:string;
+ face: string;
+ what: string;
+ who: string;
+ notes: string;
}
@Component({
diff --git a/examples/components/whiteframe/basic_usage.html b/examples/components/whiteframe/basic_usage.html
index 29b8c54f..f723704c 100644
--- a/examples/components/whiteframe/basic_usage.html
+++ b/examples/components/whiteframe/basic_usage.html
@@ -1,98 +1,122 @@
-
+
.md-whiteframe-1dp
-
+
.md-whiteframe-2dp
-
+
.md-whiteframe-3dp
-
+
.md-whiteframe-4dp
-
+
.md-whiteframe-5dp
-
+
.md-whiteframe-6dp
-
+
.md-whiteframe-7dp
-
+
.md-whiteframe-8dp
-
+
.md-whiteframe-9dp
-
+
.md-whiteframe-10dp
-
+
.md-whiteframe-11dp
-
+
.md-whiteframe-12dp
-
+
.md-whiteframe-13dp
-
+
.md-whiteframe-14dp
-
+
.md-whiteframe-15dp
-
+
.md-whiteframe-16dp
-
+
.md-whiteframe-17dp
-
+
.md-whiteframe-18dp
-
+
.md-whiteframe-19dp
-
+
.md-whiteframe-20dp
-
+
.md-whiteframe-21dp
-
+
.md-whiteframe-22dp
-
+
.md-whiteframe-23dp
-
+
.md-whiteframe-24dp
diff --git a/examples/components/whiteframe/basic_usage.scss b/examples/components/whiteframe/basic_usage.scss
index 985e7755..12cd8712 100644
--- a/examples/components/whiteframe/basic_usage.scss
+++ b/examples/components/whiteframe/basic_usage.scss
@@ -3,6 +3,7 @@ md-whiteframe {
margin: 30px;
height: 100px;
}
+
@media screen and (max-width: 599px) {
md-whiteframe {
margin: 7px;
@@ -13,7 +14,8 @@ md-whiteframe {
font-size: 0.4em;
}
}
-@media screen and (min-width: 600px ) and (max-width: 959px) {
+
+@media screen and (min-width: 600px) and (max-width: 959px) {
md-whiteframe {
margin: 20px;
height: 75px;
@@ -22,7 +24,8 @@ md-whiteframe {
font-size: 0.6em;
}
}
-@media screen and (min-width: 960px ) and (max-width: 1199px) {
+
+@media screen and (min-width: 960px) and (max-width: 1199px) {
md-whiteframe {
margin: 20px;
height: 90px;
@@ -33,7 +36,7 @@ md-whiteframe {
}
}
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1200px) {
md-whiteframe {
margin: 25px;
height: 100px;
diff --git a/examples/components/whiteframe/basic_usage.ts b/examples/components/whiteframe/basic_usage.ts
index 03f56aba..d00b58f2 100644
--- a/examples/components/whiteframe/basic_usage.ts
+++ b/examples/components/whiteframe/basic_usage.ts
@@ -1,5 +1,5 @@
-import {View, Component} from 'angular2/core';
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'whiteframe-basic-usage',
diff --git a/examples/example.scss b/examples/example.scss
index b6c98992..fa68cd83 100644
--- a/examples/example.scss
+++ b/examples/example.scss
@@ -3,7 +3,6 @@
@import "../ng2-material/core/style/theme-functions";
@import "../ng2-material/core/style/default-theme";
-
example {
md-example-view {
display: block;
diff --git a/examples/example.ts b/examples/example.ts
index 6d2001a9..8dc48d01 100644
--- a/examples/example.ts
+++ b/examples/example.ts
@@ -1,24 +1,16 @@
-import {View, Component} from 'angular2/core';
-import {Input} from 'angular2/core';
-import {DynamicComponentLoader} from "angular2/core";
-import {ElementRef} from "angular2/core";
-import {ComponentRef} from "angular2/core";
+import {Component, Input, DynamicComponentLoader, ElementRef, ComponentRef, Query, QueryList} from "angular2/core";
import {IExampleData} from "./app";
import {DEMO_DIRECTIVES} from "./all";
import {MATERIAL_DIRECTIVES} from "ng2-material/all";
-import {Http} from "angular2/http";
-import {Response} from "angular2/http";
-import {Highlight} from './highlight';
+import {Http, Response} from "angular2/http";
+import {Highlight} from "./highlight";
import {TimerWrapper} from "angular2/src/facade/async";
-import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {MdTabs} from "ng2-material/components/tabs/tabs";
-import {Query} from "angular2/core";
-import {QueryList} from "angular2/core";
export interface ISourceFile {
- data:string;
- type:string;
+ data: string;
+ type: string;
}
@Component({
@@ -48,7 +40,8 @@ export default class Example {
constructor(private _element: ElementRef,
public http: Http,
- @Query(MdTabs) public panes: QueryList,
+ @Query(MdTabs)
+ public panes: QueryList,
public dcl: DynamicComponentLoader) {
}
@@ -67,7 +60,8 @@ export default class Example {
/**
* The selected type of source to view.
*/
- @Input() public selected: string = 'html';
+ @Input()
+ public selected: string = 'html';
applyModel(model: IExampleData) {
this.orderedFiles = [];
@@ -87,7 +81,7 @@ export default class Example {
let template = `<${model.component}>${model.component}>`;
@Component({
selector: 'md-example-view',
- template: template,
+ template: template,
directives: [MATERIAL_DIRECTIVES, DEMO_DIRECTIVES]
})
class CompiledComponent {
@@ -116,7 +110,7 @@ export default class Example {
}
toggleSource() {
- if(this.showSource){
+ if (this.showSource) {
this.showTabs = false;
TimerWrapper.setTimeout(() => {
this.showSource = false;
diff --git a/examples/highlight.scss b/examples/highlight.scss
index 5fe59e3f..269330ba 100644
--- a/examples/highlight.scss
+++ b/examples/highlight.scss
@@ -133,7 +133,6 @@ highlight .hljs-constant,
opacity: 0.5;
}
-
/*******************
* CODE HIGHLIGHTING
*******************/
@@ -159,7 +158,6 @@ pre, code {
overflow-wrap: break-word;
}
-
pre > code.highlight {
background-color: transparent;
font-weight: 400;
@@ -184,6 +182,7 @@ code:not(.highlight) {
padding: 0.125em 0.35em;
border-radius: 2px;
}
+
.layout-content code.highlight {
margin-bottom: 15px;
}
diff --git a/examples/highlight.ts b/examples/highlight.ts
index 1007994b..b5a9189a 100644
--- a/examples/highlight.ts
+++ b/examples/highlight.ts
@@ -1,8 +1,5 @@
-import {Component, View, Input} from "angular2/core";
-import {ViewEncapsulation} from "angular2/core";
-import {AfterContentInit} from "angular2/core";
+import {Component, Input, ViewEncapsulation, AfterContentInit, ElementRef} from "angular2/core";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
-import {ElementRef} from "angular2/core";
declare var hljs: any;
diff --git a/examples/routes/component.ts b/examples/routes/component.ts
index 61dfe7f0..7f76be82 100644
--- a/examples/routes/component.ts
+++ b/examples/routes/component.ts
@@ -1,12 +1,8 @@
-import {Component} from 'angular2/core';
-import {RouteConfig, RouterOutlet} from 'angular2/router';
-import {RouteParams} from "angular2/router";
-import {Router} from "angular2/router";
-import {OnInit} from "angular2/core";
+import {Component, OnInit} from "angular2/core";
+import {RouteParams, ROUTER_DIRECTIVES} from "angular2/router";
import {ComponentsService, IComponentMeta} from "../services/components";
import {MATERIAL_DIRECTIVES} from "../../ng2-material/all";
import Example from "../example";
-import {ROUTER_DIRECTIVES} from "angular2/router";
import {NavigationService} from "../services/navigation";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {SidenavService} from "../../ng2-material/components/sidenav/sidenav_service";
diff --git a/examples/routes/index.html b/examples/routes/index.html
index 9b5b3946..b8aae834 100644
--- a/examples/routes/index.html
+++ b/examples/routes/index.html
@@ -5,7 +5,8 @@ Introduction
Welcome to the ng2-material examples site.
Here's the test coverage report.
- Compatible with: angular2@{{angularVersion}} .
+ Compatible with: angular2@{{angularVersion}} .
+
There are instructions for getting started at the bottom.
@@ -17,18 +18,18 @@ Components
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/services/components.ts b/examples/services/components.ts
index ff31ee9f..5321972e 100644
--- a/examples/services/components.ts
+++ b/examples/services/components.ts
@@ -1,21 +1,20 @@
import {Injectable} from "angular2/core";
-import {Http} from "angular2/http";
-import {Response} from "angular2/http";
+import {Http, Response} from "angular2/http";
export interface IComponentExample {
- component:string;
- name:string;
- source:string;
- styles:string;
- template:string;
+ component: string;
+ name: string;
+ source: string;
+ styles: string;
+ template: string;
}
export interface IComponentMeta {
- id:string;
- readme?:string;
- name:string;
- sources:string[];
- examples:IComponentExample[];
+ id: string;
+ readme?: string;
+ name: string;
+ sources: string[];
+ examples: IComponentExample[];
}
@Injectable()
diff --git a/examples/services/navigation.ts b/examples/services/navigation.ts
index d240e579..3d908bfc 100644
--- a/examples/services/navigation.ts
+++ b/examples/services/navigation.ts
@@ -5,16 +5,16 @@ export interface INavigationLink {
/**
* Brief description of no more than a few words
*/
- brief:string;
+ brief: string;
/**
* Value to bind to routeLink.
*/
- routeLink:any[];
+ routeLink: any[];
}
@Injectable()
export class NavigationService {
- public currentTitle:string = null;
+ public currentTitle: string = null;
public nextLink: INavigationLink = null;
public prevLink: INavigationLink = null;
diff --git a/examples/services/version.ts b/examples/services/version.ts
index 3bc109f5..e1f6064f 100644
--- a/examples/services/version.ts
+++ b/examples/services/version.ts
@@ -1,10 +1,9 @@
import {Injectable} from "angular2/core";
-import {Http} from "angular2/http";
-import {Response} from "angular2/http";
+import {Http, Response} from "angular2/http";
export interface IVersionMeta {
- version:string;
- readme:string;
+ version: string;
+ readme: string;
}
@Injectable()
diff --git a/karma.conf.js b/karma.conf.js
index da42488e..b5a96a7f 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -16,25 +16,20 @@ module.exports = function (config) {
basePath: '',
frameworks: ['jasmine'],
files: [
- {pattern: 'node_modules/es6-shim/es6-shim.js', included: true, watched: true},
- {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true},
+ {pattern: 'node_modules/es6-shim/es6-shim.min.js', included: true, watched: true},
{pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true},
+ 'karma.ie.shims.js',
+
+ // Angular 2 polyfills *must* be loaded after es6-shim and system-polyfills in order to
+ // setup the monkey-patches for zones.
+ {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true},
{pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
{pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
- //{pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: true},
- //{pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},
- 'karma.ie.shims.js',
- //'node_modules/zone.js/dist/zone-microtask.js',
- //'node_modules/zone.js/dist/long-stack-trace-zone.js',
- //'node_modules/zone.js/dist/jasmine-patch.js',
- //'node_modules/es6-module-loader/dist/es6-module-loader.js',
- 'node_modules/systemjs/dist/system.src.js',
'node_modules/reflect-metadata/Reflect.js',
- "config.karma.js",
- {pattern: 'ng2-material/**/*.*', watched: true, included: false},
- //{pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false},
{pattern: 'node_modules/angular2/**/*.js', included: false, watched: false},
{pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+ "config.karma.js",
+ {pattern: 'ng2-material/**/*.*', watched: true, included: false},
{pattern: 'test/**/*.js', included: false, watched: true},
"karma.main.js"
diff --git a/ng2-material/all.ts b/ng2-material/all.ts
index 7cb0d2bc..065e321c 100644
--- a/ng2-material/all.ts
+++ b/ng2-material/all.ts
@@ -1,74 +1,74 @@
-import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
-
-import {MdAnchor, MdButton} from './components/button/button';
+import {CONST_EXPR, Type} from "angular2/src/facade/lang";
+import {MdAnchor, MdButton} from "./components/button/button";
+import {MdCheckbox} from "./components/checkbox/checkbox";
+import {MdContent} from "./components/content/content";
+import {MdDialog} from "./components/dialog/dialog";
+import {MdDivider} from "./components/divider/divider";
+import {MdIcon} from "./components/icon/icon";
+import {MdInk} from "./components/ink/ink";
+import {
+ MdPatternValidator,
+ MdMaxLengthValidator,
+ MdMinValueValidator,
+ MdMaxValueValidator,
+ MdNumberRequiredValidator,
+ INPUT_VALIDATORS
+} from "./components/form/validators";
+import {MdMessage, MdMessages} from "./components/form/messages";
+import {MdInput, MdInputContainer} from "./components/input/input";
+import {MdList, MdListItem} from "./components/list/list";
+import {MdProgressLinear} from "./components/progress_linear/progress_linear";
+import {MdProgressCircular} from "./components/progress_circular/progress_circular";
+import {MdPeekaboo} from "./components/peekaboo/peekaboo";
+import {MdRadioButton, MdRadioGroup} from "./components/radio/radio_button";
+import {MdRadioDispatcher} from "./components/radio/radio_dispatcher";
+import {MdSwitch} from "./components/switcher/switch";
+import {MdSubheader} from "./components/subheader/subheader";
+import {MdSidenav, MdSidenavContainer} from "./components/sidenav/sidenav";
+import {SidenavService} from "./components/sidenav/sidenav_service";
+import {MdToolbar} from "./components/toolbar/toolbar";
+import {MdTabs, MdTab} from "./components/tabs/tabs";
+import {Media} from "./core/util/media";
export * from './components/button/button';
-import {MdCheckbox} from './components/checkbox/checkbox';
export * from './components/checkbox/checkbox';
-import {MdContent} from './components/content/content';
export * from './components/content/content';
export * from './components/dialog/dialog';
-import {MdDialog} from './components/dialog/dialog';
-
-import {MdDivider} from './components/divider/divider';
export * from './components/divider/divider';
-import {MdIcon} from './components/icon/icon';
export * from './components/icon/icon';
-import {MdInk} from './components/ink/ink';
export * from './components/ink/ink';
-import {
- MdPatternValidator, MdMaxLengthValidator,
- MdMinValueValidator, MdMaxValueValidator,
- MdNumberRequiredValidator,
- INPUT_VALIDATORS
-} from './components/form/validators';
export * from './components/form/validators';
-import {MdMessage, MdMessages} from './components/form/messages';
export * from './components/form/messages';
-import {MdInput, MdInputContainer} from './components/input/input';
export * from './components/input/input';
-import {MdList, MdListItem} from './components/list/list';
export * from './components/list/list';
-import {MdProgressLinear} from './components/progress_linear/progress_linear';
export * from './components/progress_linear/progress_linear';
-import {MdProgressCircular} from './components/progress_circular/progress_circular';
export * from './components/progress_circular/progress_circular';
-import {MdPeekaboo} from './components/peekaboo/peekaboo';
export * from './components/peekaboo/peekaboo';
-import {MdRadioButton, MdRadioGroup} from './components/radio/radio_button';
-import {MdRadioDispatcher} from './components/radio/radio_dispatcher';
export * from './components/radio/radio_button';
export * from './components/radio/radio_dispatcher';
-import {MdSwitch} from './components/switcher/switch';
export * from './components/switcher/switch';
-import {MdSubheader} from "./components/subheader/subheader";
export * from './components/subheader/subheader';
-import {MdSidenav, MdSidenavContainer} from './components/sidenav/sidenav';
-import {SidenavService} from './components/sidenav/sidenav_service';
export * from './components/sidenav/sidenav';
export * from './components/sidenav/sidenav_service';
-import {MdToolbar} from './components/toolbar/toolbar';
export * from './components/toolbar/toolbar';
-import {MdTabs, MdTab} from './components/tabs/tabs';
export * from './components/tabs/tabs';
-import {Media} from "./core/util/media";
export * from './core/util/media';
export * from './core/util/animate';
diff --git a/ng2-material/components/backdrop/backdrop.ts b/ng2-material/components/backdrop/backdrop.ts
index 5d34d305..8b2cb046 100644
--- a/ng2-material/components/backdrop/backdrop.ts
+++ b/ng2-material/components/backdrop/backdrop.ts
@@ -1,5 +1,5 @@
import {Animate} from "../../core/util/animate";
-import {ElementRef, Renderer, ViewEncapsulation, View, Component, Input, Output, EventEmitter} from "angular2/core";
+import {ElementRef, ViewEncapsulation, Component, Input, Output, EventEmitter} from "angular2/core";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
/**
@@ -9,7 +9,7 @@ import {DOM} from "angular2/src/platform/dom/dom_adapter";
*/
@Component({
selector: 'md-backdrop',
- template: '',
+ template: '',
encapsulation: ViewEncapsulation.None,
host: {
'class': 'md-backdrop',
diff --git a/ng2-material/components/button/button.scss b/ng2-material/components/button/button.scss
index 6fea4036..ae98edd3 100644
--- a/ng2-material/components/button/button.scss
+++ b/ng2-material/components/button/button.scss
@@ -1,6 +1,5 @@
@import "../../core/style/variables";
@import "../../core/style/shadows";
-
// TODO(jelbourn): This goes away.
@import "../../core/style/default-theme";
@@ -8,7 +7,6 @@
// TODO(jelbourn): Measure perf benefits for translate3d and will-change.
// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
-
// Standard button sizing.
$md-button-padding: 0 rem(0.600) !default;
$md-button-min-width: rem(8.800) !default;
@@ -104,7 +102,7 @@ $md-icon-border-radius: $md-fab-border-radius;
// Animation.
transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
- box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
+ box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
// Hide the browser focus indicator, instead applying our own focus style on background-color.
&:focus {
@@ -143,7 +141,6 @@ $md-icon-border-radius: $md-fab-border-radius;
@include md-button-icon();
}
-
// Use the [disabled] attribute instead of the :disabled pseudo-class because anchors
// cannot technically be :disabled.
&[disabled] {
@@ -192,16 +189,16 @@ $md-icon-border-radius: $md-fab-border-radius;
}
&.md-warn {
- color: md-color($md-warn,default-contrast); //'{{warn-contrast}}';
+ color: md-color($md-warn, default-contrast); //'{{warn-contrast}}';
background-color: md-color($md-warn); //'{{warn-color}}';
[md-icon] {
- color: md-color($md-warn,default-contrast); //'{{warn-contrast}}';
+ color: md-color($md-warn, default-contrast); //'{{warn-contrast}}';
}
&:hover {
background-color: md-color($md-warn); //'{{warn-color}}';
}
&.md-focused {
- background-color: md-color($md-warn,700); //'{{warn-700}}';
+ background-color: md-color($md-warn, 700); //'{{warn-700}}';
}
}
@@ -217,7 +214,6 @@ $md-icon-border-radius: $md-fab-border-radius;
}
-
[md-button] {
@include md-button-base();
&:hover {
@@ -246,16 +242,16 @@ $md-icon-border-radius: $md-fab-border-radius;
vertical-align: middle;
background-color: md-color($md-accent); //'{{accent-color}}';
- color: md-color($md-accent,default-contrast); //'{{accent-contrast}}';
+ color: md-color($md-accent, default-contrast); //'{{accent-contrast}}';
[md-icon] {
- color: md-color($md-accent,default-contrast); //'{{accent-contrast}}';
+ color: md-color($md-accent, default-contrast); //'{{accent-contrast}}';
}
&:not([disabled]) {
&:hover {
background-color: md-color($md-accent); //'{{accent-color}}';
}
&.md-focused {
- background-color: md-color($md-accent,A700); //'{{accent-A700}}';
+ background-color: md-color($md-accent, A700); //'{{accent-A700}}';
}
}
@@ -264,8 +260,6 @@ $md-icon-border-radius: $md-fab-border-radius;
@include md-ripple-base();
}
-
-
&.md-mini {
line-height: $md-fab-mini-line-height;
width: $md-fab-mini-size;
diff --git a/ng2-material/components/button/button.ts b/ng2-material/components/button/button.ts
index b2740fc6..a4f21da8 100644
--- a/ng2-material/components/button/button.ts
+++ b/ng2-material/components/button/button.ts
@@ -1,10 +1,7 @@
-import {Component, View, ViewEncapsulation, OnChanges} from 'angular2/core';
-
-import {TimerWrapper} from 'angular2/src/facade/async';
-import {isPresent} from 'angular2/src/facade/lang';
-import {ElementRef} from "angular2/core";
+import {Component, ViewEncapsulation, OnChanges, ElementRef} from "angular2/core";
+import {TimerWrapper} from "angular2/src/facade/async";
+import {isPresent} from "angular2/src/facade/lang";
import {Ink} from "../../core/util/ink";
-import {Attribute} from "angular2/core";
const BUTTON_TEMPLATE = ` `;
diff --git a/ng2-material/components/checkbox/checkbox.ts b/ng2-material/components/checkbox/checkbox.ts
index e56b7b4b..0a458355 100644
--- a/ng2-material/components/checkbox/checkbox.ts
+++ b/ng2-material/components/checkbox/checkbox.ts
@@ -1,9 +1,6 @@
-import {Component, View, Attribute, ViewEncapsulation} from 'angular2/core';
-import {isPresent} from 'angular2/src/facade/lang';
-import {KeyCodes} from '../../core/key_codes';
-import {KeyboardEvent} from 'angular2/src/facade/browser';
-import {NumberWrapper} from 'angular2/src/facade/lang';
-import {Input, Output, EventEmitter} from 'angular2/core';
+import {Component, ViewEncapsulation, Input, Output, EventEmitter} from "angular2/core";
+import {isPresent} from "angular2/src/facade/lang";
+import {KeyCodes} from "../../core/key_codes";
import {parseTabIndexAttribute} from "../../core/util/util";
// TODO(jd): ng-true-value, ng-false-value
@@ -41,7 +38,8 @@ export class MdCheckbox {
disabled_: boolean = false;
/** Setter for tabindex */
- @Input('tabindex') private _tabindex: number;
+ @Input('tabindex')
+ private _tabindex: number;
set tabindex(value: number) {
this._tabindex = parseTabIndexAttribute(value);
}
diff --git a/ng2-material/components/content/content.scss b/ng2-material/components/content/content.scss
index bf30cfab..a063c216 100644
--- a/ng2-material/components/content/content.scss
+++ b/ng2-material/components/content/content.scss
@@ -2,7 +2,6 @@
@import "../../core/style/shadows";
@import "../../core/style/default-theme";
-
md-content {
display: block;
@@ -34,7 +33,7 @@ md-content {
md-content {
color: md-color($md-foreground, text);
- background-color: md-color($md-background,A100);
+ background-color: md-color($md-background, A100);
}
diff --git a/ng2-material/components/dialog/dialog.ts b/ng2-material/components/dialog/dialog.ts
index 3350402e..a8982fd9 100644
--- a/ng2-material/components/dialog/dialog.ts
+++ b/ng2-material/components/dialog/dialog.ts
@@ -12,7 +12,6 @@ import {
RootRenderer,
APPLICATION_COMMON_PROVIDERS
} from "angular2/core";
-import {TimerWrapper} from "angular2/src/facade/async";
import {isPresent, Type} from "angular2/src/facade/lang";
import {MdDialogRef} from "./dialog_ref";
import {MdDialogConfig} from "./dialog_config";
diff --git a/ng2-material/components/dialog/dialog_basic.ts b/ng2-material/components/dialog/dialog_basic.ts
index 33ac94db..9762f7ac 100644
--- a/ng2-material/components/dialog/dialog_basic.ts
+++ b/ng2-material/components/dialog/dialog_basic.ts
@@ -1,9 +1,7 @@
import {NgIf} from "angular2/common";
import {MdButton} from "../button/button";
-import {View} from "angular2/core";
-import {Component} from "angular2/core";
+import {Component, Input} from "angular2/core";
import {MdDialogRef} from "./dialog_ref";
-import {Input} from "angular2/core";
@Component({
selector: 'md-dialog-basic',
@@ -11,21 +9,30 @@ import {Input} from "angular2/core";
{{ title }}
{{ textContent }}
-
+
+
{{ cancel }}
-
-
+
+
+
+
{{ ok }}
+
`,
directives: [MdButton, NgIf]
})
export class MdDialogBasic {
- @Input() title: string = '';
- @Input() textContent: string = '';
- @Input() cancel: string = '';
- @Input() ok: string = '';
- @Input() type: string = 'alert';
+ @Input()
+ title: string = '';
+ @Input()
+ textContent: string = '';
+ @Input()
+ cancel: string = '';
+ @Input()
+ ok: string = '';
+ @Input()
+ type: string = 'alert';
constructor(public dialog: MdDialogRef) {
}
diff --git a/ng2-material/components/dialog/dialog_config.ts b/ng2-material/components/dialog/dialog_config.ts
index 9eed68eb..098e3b26 100644
--- a/ng2-material/components/dialog/dialog_config.ts
+++ b/ng2-material/components/dialog/dialog_config.ts
@@ -1,5 +1,3 @@
-
-
import {MdDialogRef} from "./dialog_ref";
/** Configuration for a dialog to be opened. */
diff --git a/ng2-material/components/dialog/dialog_container.ts b/ng2-material/components/dialog/dialog_container.ts
index 4654abae..3fffd6f8 100644
--- a/ng2-material/components/dialog/dialog_container.ts
+++ b/ng2-material/components/dialog/dialog_container.ts
@@ -1,13 +1,6 @@
-import {ViewEncapsulation} from "angular2/core";
-import {View} from "angular2/core";
-import {Component} from "angular2/core";
-import {ElementRef} from "angular2/core";
+import {ViewEncapsulation, Component, ElementRef, forwardRef, Directive, Host, SkipSelf} from "angular2/core";
import {MdDialogRef} from "./dialog_ref";
import {KeyCodes} from "../../core/key_codes";
-import {forwardRef} from "angular2/core";
-import {Directive} from "angular2/core";
-import {Host} from "angular2/core";
-import {SkipSelf} from "angular2/core";
/**
* Container for user-provided dialog content.
diff --git a/ng2-material/components/dialog/dialog_ref.ts b/ng2-material/components/dialog/dialog_ref.ts
index e29be35f..63b804f4 100644
--- a/ng2-material/components/dialog/dialog_ref.ts
+++ b/ng2-material/components/dialog/dialog_ref.ts
@@ -38,7 +38,7 @@ export class MdDialogRef {
* The backdrop hiding subscription
* @private
*/
- private _subscription:any = null;
+ private _subscription: any = null;
set backdropRef(value: ComponentRef) {
this._backdropRef = value;
@@ -76,10 +76,10 @@ export class MdDialogRef {
* Closes the dialog. This operation is asynchronous.
*/
close(result: any = null): Promise {
- if(this.isClosed){
+ if (this.isClosed) {
return this.whenClosedDeferred.promise;
}
- if(this._subscription){
+ if (this._subscription) {
this._subscription.unsubscribe();
}
this.isClosed = true;
@@ -88,10 +88,8 @@ export class MdDialogRef {
if (this._backdropRef) {
otherAsync = this._backdropRef.instance.hide();
}
- return this.contentRefDeferred.promise.then((_) => {
- otherAsync.then(() => {
- this.whenClosedDeferred.resolve(result);
- });
+ return otherAsync.then(() => {
+ this.whenClosedDeferred.resolve(result);
});
});
}
diff --git a/ng2-material/components/divider/divider.scss b/ng2-material/components/divider/divider.scss
index b870a8d1..d5f15617 100644
--- a/ng2-material/components/divider/divider.scss
+++ b/ng2-material/components/divider/divider.scss
@@ -25,11 +25,11 @@ md-divider {
// Theme
md-divider {
- border-top-color: md-color($md-foreground,divider);
+ border-top-color: md-color($md-foreground, divider);
}
.layout-row {
& > md-divider {
- border-right-color: md-color($md-foreground,divider);
+ border-right-color: md-color($md-foreground, divider);
}
}
diff --git a/ng2-material/components/divider/divider.ts b/ng2-material/components/divider/divider.ts
index 958e4a57..d411d6be 100644
--- a/ng2-material/components/divider/divider.ts
+++ b/ng2-material/components/divider/divider.ts
@@ -1,5 +1,4 @@
-import {Component,View, ElementRef} from "angular2/core";
-import {ViewEncapsulation} from "angular2/core";
+import {Component, ViewEncapsulation} from "angular2/core";
/**
* @name mdDivider
@@ -18,7 +17,7 @@ import {ViewEncapsulation} from "angular2/core";
*/
@Component({
selector: 'md-divider',
- template: '',
+ template: '',
encapsulation: ViewEncapsulation.None
})
export class MdDivider {
diff --git a/ng2-material/components/form/messages.ts b/ng2-material/components/form/messages.ts
index a6b7fed0..9d3be57c 100644
--- a/ng2-material/components/form/messages.ts
+++ b/ng2-material/components/form/messages.ts
@@ -1,12 +1,6 @@
-import {CONST_EXPR} from 'angular2/src/facade/lang';
-import {NG_VALIDATORS} from 'angular2/common';
-import {
- Attribute, Input, Provider, Directive, Optional, SkipSelf, Host, OnDestroy, OnInit,
- ContentChildren, QueryList, Query, AfterContentInit
-} from 'angular2/core';
-import {Validator, NgFormModel, NgControlName} from 'angular2/common';
-import {Control, ControlGroup, AbstractControl} from 'angular2/common';
-import {isPresent} from 'angular2/src/facade/lang';
+import {isPresent} from "angular2/src/facade/lang";
+import {NgFormModel, NgControlName, ControlGroup, AbstractControl} from "angular2/common";
+import {Input, Directive, Optional, SkipSelf, Host, OnDestroy, OnInit, QueryList, Query} from "angular2/core";
// TODO(jd): Behaviors to test
@@ -65,8 +59,10 @@ export class MdMessages implements OnInit, OnDestroy {
}
- constructor(@Query(MdMessage) public messages: QueryList,
- @Optional() @SkipSelf() @Host() public form: NgFormModel) {
+ constructor(@Query(MdMessage)
+ public messages: QueryList,
+ @Optional() @SkipSelf() @Host()
+ public form: NgFormModel) {
}
/**
@@ -104,7 +100,7 @@ export class MdMessages implements OnInit, OnDestroy {
}
private _valueChanged() {
- let errors: {[errorKey:string]:string} = null;
+ let errors: {[errorKey: string]: string} = null;
if (this.property instanceof NgControlName) {
let ctrl: NgControlName = this.property;
errors = ctrl.errors;
diff --git a/ng2-material/components/form/validators.ts b/ng2-material/components/form/validators.ts
index 497a43e0..5a948a26 100644
--- a/ng2-material/components/form/validators.ts
+++ b/ng2-material/components/form/validators.ts
@@ -1,10 +1,7 @@
-import {CONST_EXPR} from "angular2/src/facade/lang";
-import {NG_VALIDATORS} from "angular2/common";
-import {Attribute, Input, Provider, Directive,forwardRef} from "angular2/core";
-import {Validator} from "angular2/common";
-import {Control} from "angular2/common";
-import {isNumber} from '../../core/util/util';
-import {isPresent, NumberWrapper} from 'angular2/src/facade/lang';
+import {CONST_EXPR, NumberWrapper} from "angular2/src/facade/lang";
+import {NG_VALIDATORS, Validator, Control, AbstractControl} from "angular2/common";
+import {Input, Provider, Directive, forwardRef} from "angular2/core";
+import {isNumber} from "../../core/util/util";
const PATTERN_VALIDATOR = CONST_EXPR(new Provider(NG_VALIDATORS, {
useExisting: forwardRef(() => MdPatternValidator),
@@ -19,8 +16,8 @@ export class MdPatternValidator implements Validator {
/**
* Returns a validator that checks to see if a string matches a given Regular Expression
*/
- static inline(pattern: string): Function {
- return function validate(control: Control): {[key: string]: any} {
+ static inline(pattern: string): any {
+ return function validate(control: AbstractControl): {[key: string]: any} {
if (control.value === '' || new RegExp(pattern).test(control.value)) {
return null;
}
@@ -30,7 +27,8 @@ export class MdPatternValidator implements Validator {
}
}
- @Input() mdPattern: string;
+ @Input()
+ mdPattern: string;
validate(control: Control): {[key: string]: any} {
return MdPatternValidator.inline(this.mdPattern)(control);
@@ -46,8 +44,8 @@ export class MdMaxLengthValidator implements Validator {
/**
* Returns a validator that checks for a maximum length of a string
*/
- static inline(length: number|string): Function {
- return function validate(control: Control): {[key: string]: any} {
+ static inline(length: number|string): any {
+ return function validate(control: AbstractControl): {[key: string]: any} {
if (!control.value || control.value.length <= length) {
return null;
}
@@ -57,7 +55,8 @@ export class MdMaxLengthValidator implements Validator {
}
}
- @Input() mdMaxLength: string;
+ @Input()
+ mdMaxLength: string;
validate(control: Control): {[key: string]: any} {
return MdMaxLengthValidator.inline(this.mdMaxLength)(control);
@@ -73,8 +72,8 @@ export class MdMaxValueValidator implements Validator {
/**
* Returns a validator that checks for a maximum number value
*/
- static inline(length: number|string): Function {
- return function validate(control: Control): {[key: string]: any} {
+ static inline(length: number|string): any {
+ return function validate(control: AbstractControl): {[key: string]: any} {
if (NumberWrapper.isNaN(control.value) || control.value <= length) {
return null;
}
@@ -84,7 +83,8 @@ export class MdMaxValueValidator implements Validator {
}
}
- @Input() mdMax: string;
+ @Input()
+ mdMax: string;
validate(control: Control): {[key: string]: any} {
return MdMaxValueValidator.inline(this.mdMax)(control);
@@ -100,8 +100,8 @@ export class MdMinValueValidator implements Validator {
/**
* Returns a validator that checks for a minimum number value
*/
- static inline(length: number|string): Function {
- return function validate(control: Control): {[key: string]: any} {
+ static inline(length: number|string): any {
+ return function validate(control: AbstractControl): {[key: string]: any} {
if (NumberWrapper.isNaN(control.value) || control.value >= length) {
return null;
}
@@ -111,7 +111,8 @@ export class MdMinValueValidator implements Validator {
}
}
- @Input() mdMin: string;
+ @Input()
+ mdMin: string;
validate(control: Control): {[key: string]: any} {
return MdMinValueValidator.inline(this.mdMin)(control);
@@ -127,8 +128,8 @@ export class MdNumberRequiredValidator implements Validator {
/**
* Returns a validator that checks for the existence of a truthy value
*/
- static inline(): Function {
- return function validate(control: Control): {[key: string]: any} {
+ static inline(): any {
+ return function validate(control: AbstractControl): {[key: string]: any} {
let isNum = !NumberWrapper.isNaN(control.value) && isNumber(control.value);
return isNum ? null : {mdNumberRequired: true};
}
diff --git a/ng2-material/components/icon/icon.ts b/ng2-material/components/icon/icon.ts
index f88ad927..7ff0b822 100644
--- a/ng2-material/components/icon/icon.ts
+++ b/ng2-material/components/icon/icon.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef} from 'angular2/core';
+import {Directive} from "angular2/core";
@Directive({
selector: '[md-icon], .md-icon',
diff --git a/ng2-material/components/ink/ink.ts b/ng2-material/components/ink/ink.ts
index a74fb7af..531b65bf 100644
--- a/ng2-material/components/ink/ink.ts
+++ b/ng2-material/components/ink/ink.ts
@@ -9,7 +9,8 @@ import {Ink} from "../../core/util/ink";
})
export class MdInk {
- @Output() inked:EventEmitter = new EventEmitter(false);
+ @Output()
+ inked: EventEmitter = new EventEmitter(false);
constructor(private _element: ElementRef) {
}
diff --git a/ng2-material/components/input/input.scss b/ng2-material/components/input/input.scss
index 1485d639..919e7902 100644
--- a/ng2-material/components/input/input.scss
+++ b/ng2-material/components/input/input.scss
@@ -359,7 +359,6 @@ md-input-container {
color: md-color($md-warn, 500)
}
-
&:not(.md-input-invalid) {
&.md-input-has-value {
label {
diff --git a/ng2-material/components/input/input.ts b/ng2-material/components/input/input.ts
index 0ad534c2..df7fc022 100644
--- a/ng2-material/components/input/input.ts
+++ b/ng2-material/components/input/input.ts
@@ -1,6 +1,5 @@
import {
Directive,
- View,
Component,
AfterContentInit,
ElementRef,
diff --git a/ng2-material/components/list/list.scss b/ng2-material/components/list/list.scss
index d456e51b..ec6ddbe6 100644
--- a/ng2-material/components/list/list.scss
+++ b/ng2-material/components/list/list.scss
@@ -54,7 +54,7 @@ md-list-item {
position: relative;
padding: $list-item-padding-vertical $list-item-padding-horizontal;
flex: 1 1 auto;
-
+
&.md-button {
font-size: inherit;
height: inherit;
@@ -99,7 +99,7 @@ md-list-item, md-list-item .md-list-item-inner {
justify-content: flex-start;
align-items: center;
min-height: $list-item-height;
- height:auto;
+ height: auto;
// Layout for controls in primary or secondary divs, or auto-infered first child
& > div.md-primary > [md-icon]:not(.md-avatar-icon),
@@ -116,7 +116,9 @@ md-list-item, md-list-item .md-list-item-inner {
& > md-checkbox,
md-checkbox.md-secondary {
align-self: center;
- .md-label { display: none; }
+ .md-label {
+ display: none;
+ }
}
& > [md-icon]:first-child:not(.md-avatar-icon) {
@@ -194,7 +196,6 @@ md-list-item, md-list-item .md-list-item-inner {
}
}
-
md-list-item.md-2-line,
md-list-item.md-2-line > .md-no-style,
md-list-item.md-3-line,
@@ -243,11 +244,11 @@ md-list-item.md-3-line > .md-no-style {
md-list-item.md-2-line,
md-list-item.md-2-line > .md-no-style {
- height:auto;
+ height: auto;
min-height: $list-item-two-line-height;
&.md-long-text {
- margin:1.6em;
- }
+ margin: 1.6em;
+ }
> .md-avatar, .md-avatar-icon {
margin-top: $baseline-grid * 1.5;
@@ -262,11 +263,11 @@ md-list-item.md-2-line > .md-no-style {
md-list-item.md-3-line,
md-list-item.md-3-line > .md-no-style {
- height:auto;
+ height: auto;
min-height: $list-item-three-line-height;
&.md-long-text {
- margin:1.6em;
+ margin: 1.6em;
}
> [md-icon]:first-child,
@@ -275,7 +276,6 @@ md-list-item.md-3-line > .md-no-style {
}
}
-
//
// Theme
//
@@ -284,29 +284,29 @@ md-list {
md-list-item.md-2-line .md-list-item-text,
md-list-item.md-3-line .md-list-item-text {
h3, h4 {
- color: md-color($md-foreground,text);//'{{foreground-1}}';
+ color: md-color($md-foreground, text); //'{{foreground-1}}';
}
p {
- color: md-color($md-foreground,secondary-text);//'{{foreground-2}}';
+ color: md-color($md-foreground, secondary-text); //'{{foreground-2}}';
}
}
.md-proxy-focus.md-focused div.md-no-style {
- background-color: md-color($md-background,A100);//{{background-100}}';
+ background-color: md-color($md-background, A100); //{{background-100}}';
}
md-list-item > .md-list-item-inner > [md-icon] {
- color: md-color($md-foreground,icon);//'{{foreground-2}}';
+ color: md-color($md-foreground, icon); //'{{foreground-2}}';
&.md-highlight {
- color: md-color($md-primary);//'{{primary-color}}';
+ color: md-color($md-primary); //'{{primary-color}}';
&.md-accent {
- color: md-color($md-accent);//'{{accent-color}}';
+ color: md-color($md-accent); //'{{accent-color}}';
}
}
}
md-list-item > .md-list-item-inner > .md-avatar-icon {
- background-color: md-color($md-foreground,icon); //'{{foreground-3}}';
- color: md-color($md-background,100); //'{{background-color}}';
+ background-color: md-color($md-foreground, icon); //'{{foreground-3}}';
+ color: md-color($md-background, 100); //'{{background-color}}';
}
}
diff --git a/ng2-material/components/list/list.ts b/ng2-material/components/list/list.ts
index 660d3ff3..b5d6454f 100644
--- a/ng2-material/components/list/list.ts
+++ b/ng2-material/components/list/list.ts
@@ -1,16 +1,5 @@
-import {Directive} from "angular2/core";
-import {DOM} from 'angular2/src/platform/dom/dom_adapter';
-import {ElementRef} from "angular2/core";
-import {AfterViewInit} from "angular2/core";
-import {QueryList} from "angular2/core";
-import {Query} from "angular2/core";
-import {Component} from "angular2/core";
-import {ViewEncapsulation} from "angular2/core";
-import {Renderer} from "angular2/core";
-import {View} from "angular2/core";
-import {Attribute} from "angular2/core";
-import {DynamicComponentLoader, ComponentRef} from "angular2/core";
-import {Input} from "angular2/core";
+import {Directive, ElementRef, AfterViewInit, Component} from "angular2/core";
+import {DOM} from "angular2/src/platform/dom/dom_adapter";
/**
diff --git a/ng2-material/components/peekaboo/peekaboo.ts b/ng2-material/components/peekaboo/peekaboo.ts
index dddde6ba..d68f240b 100644
--- a/ng2-material/components/peekaboo/peekaboo.ts
+++ b/ng2-material/components/peekaboo/peekaboo.ts
@@ -1,20 +1,14 @@
-import {Directive} from "angular2/core";
-import {Media, MediaListener, MEDIA_PRIORITY} from '../../core/util/media';
-import {DOM} from "angular2/src/platform/dom/dom_adapter";
-import {OnDestroy} from "angular2/core";
-import {debounce} from "../../core/util/util";
-import {Input} from "angular2/core";
-import {CONST} from "angular2/src/facade/lang";
-import {isPresent} from "angular2/src/facade/lang";
-import {Attribute} from "angular2/core";
-import {NumberWrapper} from "angular2/src/facade/lang";
-import {isString} from "angular2/src/facade/lang";
+import {Directive, OnDestroy, Input} from "angular2/core";
+import {Media, MediaListener} from "../../core/util/media";
+import {CONST, NumberWrapper, isString} from "angular2/src/facade/lang";
/** Different peekaboo actions to apply when active */
@CONST()
export class PeekabooAction {
- @CONST() static SHOW = 'show';
- @CONST() static HIDE = 'hide';
+ @CONST()
+ static SHOW = 'show';
+ @CONST()
+ static HIDE = 'hide';
}
/**
@@ -37,9 +31,11 @@ export class MdPeekaboo implements OnDestroy {
static SIZES: string[] = ['xs', 'sm', 'md', 'lg', 'xl'];
- @Input() break: number = 100;
+ @Input()
+ break: number = 100;
- @Input() breakAction: string;
+ @Input()
+ breakAction: string;
static MakeNumber(value: any): number {
return isString(value) ? NumberWrapper.parseInt(value, 10) : value;
@@ -133,7 +129,7 @@ export class MdPeekaboo implements OnDestroy {
private _watchMediaQuery(size: string) {
let l = this.media.listen(Media.getQuery(size));
- l.onMatched.subscribe((mql:MediaQueryList) => {
+ l.onMatched.subscribe((mql: MediaQueryList) => {
this.breakpoint = size;
});
this._mediaListeners.push(l);
@@ -179,7 +175,7 @@ export class MdPeekaboo implements OnDestroy {
if (top >= bp && !this._active) {
this._active = true;
}
- else if(top < bp && this._active){
+ else if (top < bp && this._active) {
this._active = false;
}
return bp;
diff --git a/ng2-material/components/progress_circular/progress_circular.ts b/ng2-material/components/progress_circular/progress_circular.ts
index 0dc82c4f..4a8ef090 100644
--- a/ng2-material/components/progress_circular/progress_circular.ts
+++ b/ng2-material/components/progress_circular/progress_circular.ts
@@ -1,19 +1,24 @@
-import {Component, View, ViewEncapsulation, Attribute, Input, SimpleChange} from 'angular2/core';
-import {CONST, isBlank, isPresent} from 'angular2/src/facade/lang';
-import {MdProgressLinear} from '../progress_linear/progress_linear';
-import {Math} from 'angular2/src/facade/math';
+import {Component, ViewEncapsulation, Input} from "angular2/core";
+import {CONST, isBlank, isPresent} from "angular2/src/facade/lang";
+import {MdProgressLinear} from "../progress_linear/progress_linear";
+import {Math} from "angular2/src/facade/math";
@CONST()
class ProgressMode {
- @CONST() static DETERMINATE = 'determinate';
- @CONST() static INDETERMINATE = 'indeterminate';
+ @CONST()
+ static DETERMINATE = 'determinate';
+ @CONST()
+ static INDETERMINATE = 'indeterminate';
}
@CONST()
class Defaults {
- @CONST() static DEFAULT_PROGRESS_SIZE = 100;
- @CONST() static DEFAULT_SCALING = 0.5;
- @CONST() static DEFAULT_HALF_TRANSITION = 'transform 0.1s linear';
+ @CONST()
+ static DEFAULT_PROGRESS_SIZE = 100;
+ @CONST()
+ static DEFAULT_SCALING = 0.5;
+ @CONST()
+ static DEFAULT_HALF_TRANSITION = 'transform 0.1s linear';
}
@Component({
diff --git a/ng2-material/components/progress_linear/progress_linear.ts b/ng2-material/components/progress_linear/progress_linear.ts
index 17d87559..60f8c20e 100644
--- a/ng2-material/components/progress_linear/progress_linear.ts
+++ b/ng2-material/components/progress_linear/progress_linear.ts
@@ -1,16 +1,18 @@
-import {Component, View, ViewEncapsulation, Attribute, OnChanges} from 'angular2/core';
-import {CONST} from 'angular2/src/facade/lang';
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-import {Math} from 'angular2/src/facade/math';
-import {Input} from 'angular2/core';
+import {Component, ViewEncapsulation, OnChanges, Input} from "angular2/core";
+import {CONST, isPresent, isBlank} from "angular2/src/facade/lang";
+import {Math} from "angular2/src/facade/math";
/** Different display / behavior modes for progress_linear. */
@CONST()
export class ProgressMode {
- @CONST() static DETERMINATE = 'determinate';
- @CONST() static INDETERMINATE = 'indeterminate';
- @CONST() static BUFFER = 'buffer';
- @CONST() static QUERY = 'query';
+ @CONST()
+ static DETERMINATE = 'determinate';
+ @CONST()
+ static INDETERMINATE = 'indeterminate';
+ @CONST()
+ static BUFFER = 'buffer';
+ @CONST()
+ static QUERY = 'query';
}
@Component({
@@ -44,13 +46,16 @@ export class MdProgressLinear implements OnChanges {
/** Value for the primary bar. */
- @Input('value') value_: number;
+ @Input('value')
+ value_: number;
/** Value for the secondary bar. */
- @Input() bufferValue: number;
+ @Input()
+ bufferValue: number;
/** The render mode for the progress bar. */
- @Input() mode: string = ProgressMode.DETERMINATE;
+ @Input()
+ mode: string = ProgressMode.DETERMINATE;
/** CSS `transform` property applied to the primary bar. */
primaryBarTransform: string;
diff --git a/ng2-material/components/radio/radio_button.scss b/ng2-material/components/radio/radio_button.scss
index fc0e8690..08a6bbe1 100644
--- a/ng2-material/components/radio/radio_button.scss
+++ b/ng2-material/components/radio/radio_button.scss
@@ -103,8 +103,11 @@ md-radio-group {
}
// TODO
-.md-radio-checked .md-ink-ripple { }
-.md-radio-container .md-ripple { }
+.md-radio-checked .md-ink-ripple {
+}
+
+.md-radio-container .md-ripple {
+}
md-radio-group:not([disabled]) md-radio-button:not([disabled]) {
diff --git a/ng2-material/components/radio/radio_button.ts b/ng2-material/components/radio/radio_button.ts
index 726c4f2a..da8cf330 100644
--- a/ng2-material/components/radio/radio_button.ts
+++ b/ng2-material/components/radio/radio_button.ts
@@ -1,23 +1,20 @@
import {
Component,
- View,
ViewEncapsulation,
Host,
SkipSelf,
Attribute,
Optional,
OnChanges,
- OnInit
-} from 'angular2/core';
-
-import {isPresent, StringWrapper, NumberWrapper} from 'angular2/src/facade/lang';
-import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
-import {Event, KeyboardEvent} from 'angular2/src/facade/browser';
-
-import {MdRadioDispatcher} from './radio_dispatcher';
-import {KeyCodes} from '../../core/key_codes';
-import {Output, Input} from 'angular2/core';
-import {OnDestroy} from "angular2/core";
+ OnInit,
+ Output,
+ Input,
+ OnDestroy
+} from "angular2/core";
+import {isPresent, StringWrapper} from "angular2/src/facade/lang";
+import {ObservableWrapper, EventEmitter} from "angular2/src/facade/async";
+import {MdRadioDispatcher} from "./radio_dispatcher";
+import {KeyCodes} from "../../core/key_codes";
import {parseTabIndexAttribute} from "../../core/util/util";
// TODO(jd): Use @ContentChildren instead of registering radio buttons with group parent manually.
@@ -135,6 +132,7 @@ export class MdRadioGroup implements OnChanges {
register(radio: MdRadioButton) {
this.radios_.push(radio);
}
+
/** Unregister a child radio button with this group. */
unregister(radio: MdRadioButton) {
this.radios_ = this.radios_.filter(r => r.id !== radio.id);
@@ -280,7 +278,7 @@ export class MdRadioButton implements OnInit, OnDestroy {
this.name = radioGroup.getName();
this.radioGroup.register(this);
if (this.checked) {
- this.radioGroup.updateValue(this.value,this.id);
+ this.radioGroup.updateValue(this.value, this.id);
}
}
diff --git a/ng2-material/components/radio/radio_dispatcher.ts b/ng2-material/components/radio/radio_dispatcher.ts
index b4a7c310..8159669c 100644
--- a/ng2-material/components/radio/radio_dispatcher.ts
+++ b/ng2-material/components/radio/radio_dispatcher.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable} from "angular2/core";
/**
* Class for radio buttons to coordinate unique selection based on name.
diff --git a/ng2-material/components/sidenav/sidenav.scss b/ng2-material/components/sidenav/sidenav.scss
index ecf38e08..9b8c194f 100644
--- a/ng2-material/components/sidenav/sidenav.scss
+++ b/ng2-material/components/sidenav/sidenav.scss
@@ -39,7 +39,6 @@ md-sidenav {
transition: $swift-ease-out;
}
-
&.md-style-side,
&.md-style-side.md-closed,
&.md-style-side.md-closed.md-sidenav-left,
diff --git a/ng2-material/components/sidenav/sidenav_service.ts b/ng2-material/components/sidenav/sidenav_service.ts
index 242a1175..49334509 100644
--- a/ng2-material/components/sidenav/sidenav_service.ts
+++ b/ng2-material/components/sidenav/sidenav_service.ts
@@ -21,8 +21,8 @@ export class SidenavService {
find(name: string): MdSidenav {
return this._instances.filter((c: MdSidenav) => {
- return c.name === name;
- })[0] || null;
+ return c.name === name;
+ })[0] || null;
}
private _instances: MdSidenav[] = [];
diff --git a/ng2-material/components/subheader/subheader.scss b/ng2-material/components/subheader/subheader.scss
index ad7bc621..5a53c71e 100644
--- a/ng2-material/components/subheader/subheader.scss
+++ b/ng2-material/components/subheader/subheader.scss
@@ -33,7 +33,7 @@ $subheader-sticky-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16) !default;
.md-subheader {
color: md-color($md-foreground, secondary-text, 0.23); //'{{ foreground-2-0.23 }}';
- background-color: md-color($md-background,A100); //'{{background-color}}';
+ background-color: md-color($md-background, A100); //'{{background-color}}';
&.md-primary {
color: md-color($md-primary); //'{{primary-color}}'
diff --git a/ng2-material/components/subheader/subheader.ts b/ng2-material/components/subheader/subheader.ts
index 47f9cccd..e732ecda 100644
--- a/ng2-material/components/subheader/subheader.ts
+++ b/ng2-material/components/subheader/subheader.ts
@@ -1,11 +1,11 @@
-import {Component, View} from "angular2/core";
+import {Component} from "angular2/core";
@Component({
selector: 'md-subheader',
host: {
'class': 'md-subheader'
},
- template:`
+ template: `
`
diff --git a/ng2-material/components/switcher/switch.scss b/ng2-material/components/switcher/switch.scss
index 38b0e5ed..9d70796f 100644
--- a/ng2-material/components/switcher/switch.scss
+++ b/ng2-material/components/switcher/switch.scss
@@ -1,5 +1,4 @@
@import "../../core/style/variables";
-
// TODO(jelbourn): This goes away.
@import "../../core/style/default-theme";
@@ -57,7 +56,7 @@ md-switch {
left: 0;
width: $switch-width - $switch-thumb-size;
position: absolute;
- transform: translate3d(0,0,0);
+ transform: translate3d(0, 0, 0);
z-index: 1;
}
@@ -117,7 +116,6 @@ md-switch {
}
}
-
// THEME
md-switch {
diff --git a/ng2-material/components/switcher/switch.ts b/ng2-material/components/switcher/switch.ts
index d3f12f80..96693f9e 100644
--- a/ng2-material/components/switcher/switch.ts
+++ b/ng2-material/components/switcher/switch.ts
@@ -1,5 +1,5 @@
-import {Component, View, ViewEncapsulation, Attribute} from 'angular2/core';
-import {MdCheckbox} from '../checkbox/checkbox';
+import {Component, ViewEncapsulation} from "angular2/core";
+import {MdCheckbox} from "../checkbox/checkbox";
// TODO(jelbourn): add gesture support
// TODO(jelbourn): clean up CSS.
diff --git a/ng2-material/components/tabs/tabs.ts b/ng2-material/components/tabs/tabs.ts
index a25feef5..153fba17 100644
--- a/ng2-material/components/tabs/tabs.ts
+++ b/ng2-material/components/tabs/tabs.ts
@@ -1,15 +1,16 @@
import {
- Component, Directive, Input, QueryList, Attribute, AfterViewInit,
- ViewContainerRef, TemplateRef, ContentChildren, forwardRef
-} from 'angular2/core';
-import {isPresent} from "angular2/src/facade/lang";
+ Component,
+ Directive,
+ Input,
+ QueryList,
+ ViewContainerRef,
+ TemplateRef,
+ ViewEncapsulation,
+ Query,
+ ElementRef
+} from "angular2/core";
import {Ink} from "../../core/util/ink";
-import {ViewEncapsulation} from "angular2/core";
import {NgFor} from "angular2/common";
-import {Host} from "angular2/core";
-import {SkipSelf} from "angular2/core";
-import {Query} from "angular2/core";
-import {ElementRef} from "angular2/core";
// TODO: behaviors to test
@@ -27,8 +28,10 @@ import {ElementRef} from "angular2/core";
selector: '[md-tab]'
})
export class MdTab {
- @Input() label: string;
- @Input() disabled: boolean = false;
+ @Input()
+ label: string;
+ @Input()
+ disabled: boolean = false;
private _active: boolean = false;
constructor(public viewContainer: ViewContainerRef,
@@ -59,16 +62,17 @@ export class MdTab {
+
{{pane.label}}
+
@@ -85,9 +89,11 @@ export class MdTab {
})
export class MdTabs {
- @Input() mdNoScroll: boolean = false;
+ @Input()
+ mdNoScroll: boolean = false;
- constructor(@Query(MdTab) public panes: QueryList,
+ constructor(@Query(MdTab)
+ public panes: QueryList,
private _element: ElementRef) {
this.panes.changes.subscribe((_) => {
this.panes.toArray().forEach((p: MdTab, index: number) => {
diff --git a/ng2-material/components/toolbar/toolbar.scss b/ng2-material/components/toolbar/toolbar.scss
index 02761905..f64cc0b3 100644
--- a/ng2-material/components/toolbar/toolbar.scss
+++ b/ng2-material/components/toolbar/toolbar.scss
@@ -88,7 +88,7 @@ md-toolbar {
}
~ md-content {
- &:not([scroll-shrink]){
+ &:not([scroll-shrink]) {
overflow: hidden;
}
> md-list {
diff --git a/ng2-material/components/toolbar/toolbar.ts b/ng2-material/components/toolbar/toolbar.ts
index 71cdd3df..120e79a6 100644
--- a/ng2-material/components/toolbar/toolbar.ts
+++ b/ng2-material/components/toolbar/toolbar.ts
@@ -1,10 +1,7 @@
-import {View,Component,Directive,AfterContentInit,Input,OnChanges,Attribute,OnDestroy} from "angular2/core";
-import {debounce,throttle, rAF} from '../../core/util/util';
-import {ElementRef} from "angular2/core";
+import {Directive, AfterContentInit, Input, OnChanges, OnDestroy, ElementRef} from "angular2/core";
+import {debounce, throttle, rAF} from "../../core/util/util";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
-import {isPresent} from "angular2/src/facade/lang";
-import {isString} from "angular2/src/facade/lang";
-import {NumberWrapper} from "angular2/src/facade/lang";
+import {isPresent, isString, NumberWrapper} from "angular2/src/facade/lang";
/**
@@ -66,13 +63,16 @@ export class MdToolbar implements AfterContentInit, OnChanges, OnDestroy {
@Input() set mdShrinkSpeed(value: number) {
this._mdShrinkSpeed = isString(value) ? NumberWrapper.parseFloat(value) : value;
}
- get mdShrinkSpeed():number {
+
+ get mdShrinkSpeed(): number {
return this._mdShrinkSpeed;
}
+
@Input() set mdScrollShrink(value: boolean) {
this._mdScrollShrink = !!isPresent(value);
}
- get mdScrollShrink():boolean {
+
+ get mdScrollShrink(): boolean {
return this._mdScrollShrink;
}
@@ -125,7 +125,7 @@ export class MdToolbar implements AfterContentInit, OnChanges, OnDestroy {
updateToolbarHeight() {
this._toolbarHeight = DOM.getProperty(this.el.nativeElement, 'offsetHeight');
- if(this._content){
+ if (this._content) {
// Add a negative margin-top the size of the toolbar to the content el.
// The content will start transformed down the toolbarHeight amount,
// so everything looks normal.
diff --git a/ng2-material/components/whiteframe/whiteframe.scss b/ng2-material/components/whiteframe/whiteframe.scss
index 1c4e2dff..7e1be8b4 100644
--- a/ng2-material/components/whiteframe/whiteframe.scss
+++ b/ng2-material/components/whiteframe/whiteframe.scss
@@ -4,72 +4,95 @@
.md-whiteframe-1dp, .md-whiteframe-z1 {
box-shadow: $whiteframe-shadow-1dp;
}
+
.md-whiteframe-2dp {
box-shadow: $whiteframe-shadow-2dp;
}
+
.md-whiteframe-3dp {
box-shadow: $whiteframe-shadow-3dp;
}
-.md-whiteframe-4dp, .md-whiteframe-z2{
+
+.md-whiteframe-4dp, .md-whiteframe-z2 {
box-shadow: $whiteframe-shadow-4dp;
}
+
.md-whiteframe-5dp {
box-shadow: $whiteframe-shadow-5dp;
}
+
.md-whiteframe-6dp {
box-shadow: $whiteframe-shadow-6dp;
}
+
.md-whiteframe-7dp, .md-whiteframe-z3 {
box-shadow: $whiteframe-shadow-7dp;
}
+
.md-whiteframe-8dp {
box-shadow: $whiteframe-shadow-8dp;
}
+
.md-whiteframe-9dp {
box-shadow: $whiteframe-shadow-9dp;
}
+
.md-whiteframe-10dp, .md-whiteframe-z4 {
box-shadow: $whiteframe-shadow-10dp;
}
+
.md-whiteframe-11dp {
box-shadow: $whiteframe-shadow-11dp;
}
+
.md-whiteframe-12dp {
box-shadow: $whiteframe-shadow-12dp;
}
-.md-whiteframe-13dp, .md-whiteframe-z5{
+
+.md-whiteframe-13dp, .md-whiteframe-z5 {
box-shadow: $whiteframe-shadow-13dp;
}
+
.md-whiteframe-14dp {
box-shadow: $whiteframe-shadow-14dp;
}
+
.md-whiteframe-15dp {
box-shadow: $whiteframe-shadow-15dp;
}
+
.md-whiteframe-16dp {
box-shadow: $whiteframe-shadow-16dp;
}
+
.md-whiteframe-17dp {
box-shadow: $whiteframe-shadow-17dp;
}
+
.md-whiteframe-18dp {
box-shadow: $whiteframe-shadow-18dp;
}
+
.md-whiteframe-19dp {
box-shadow: $whiteframe-shadow-19dp;
}
+
.md-whiteframe-20dp {
box-shadow: $whiteframe-shadow-20dp;
}
+
.md-whiteframe-21dp {
box-shadow: $whiteframe-shadow-21dp;
}
+
.md-whiteframe-22dp {
box-shadow: $whiteframe-shadow-22dp;
}
+
.md-whiteframe-23dp {
box-shadow: $whiteframe-shadow-23dp;
}
+
.md-whiteframe-24dp {
box-shadow: $whiteframe-shadow-24dp;
}
diff --git a/ng2-material/core/key_codes.ts b/ng2-material/core/key_codes.ts
index ae7f080c..bba97f38 100644
--- a/ng2-material/core/key_codes.ts
+++ b/ng2-material/core/key_codes.ts
@@ -1,10 +1,14 @@
-import {CONST} from 'angular2/src/facade/lang';
+import {CONST} from "angular2/src/facade/lang";
// Can't use an enum because Dart doesn't support enum initializers.
@CONST()
export class KeyCodes {
- @CONST() static ESCAPE = 27;
- @CONST() static SPACE = 32;
- @CONST() static UP = 38;
- @CONST() static DOWN = 40;
+ @CONST()
+ static ESCAPE = 27;
+ @CONST()
+ static SPACE = 32;
+ @CONST()
+ static UP = 38;
+ @CONST()
+ static DOWN = 40;
}
diff --git a/ng2-material/core/style/default-theme.scss b/ng2-material/core/style/default-theme.scss
index 337c70c7..bf21743e 100644
--- a/ng2-material/core/style/default-theme.scss
+++ b/ng2-material/core/style/default-theme.scss
@@ -1,11 +1,9 @@
@import 'theme-functions';
@import 'palette';
-
// Person creating a theme writes variables like this:
$md-is-dark-theme: false !default;
-
$md-primary: md-palette($md-indigo, 500, 100, 700, $md-contrast-palettes) !default;
$md-accent: md-palette($md-pink, 500, 300, 700, $md-contrast-palettes) !default;
$md-background: md-palette($md-grey, 500, 0, 600, $md-contrast-palettes) !default;
diff --git a/ng2-material/core/style/layout.scss b/ng2-material/core/style/layout.scss
index 3228cdff..1b960c2a 100644
--- a/ng2-material/core/style/layout.scss
+++ b/ng2-material/core/style/layout.scss
@@ -14,13 +14,13 @@
// Layout
// ------------------------------
-$baseline-grid: 8px !default;
-$layout-gutter-width: ($baseline-grid * 2) !default;
+$baseline-grid: 8px !default;
+$layout-gutter-width: ($baseline-grid * 2) !default;
-$layout-breakpoint-xs: 600px !default;
-$layout-breakpoint-sm: 960px !default;
-$layout-breakpoint-md: 1280px !default;
-$layout-breakpoint-lg: 1920px !default;
+$layout-breakpoint-xs: 600px !default;
+$layout-breakpoint-sm: 960px !default;
+$layout-breakpoint-md: 1280px !default;
+$layout-breakpoint-lg: 1920px !default;
@-moz-document url-prefix() {
[layout-fill] {
@@ -31,25 +31,27 @@ $layout-breakpoint-lg: 1920px !default;
}
}
-
@mixin flex-order-for-name($sizes:null) {
@if $sizes == null {
- $sizes : '';
+ $sizes: '';
[flex-order] {
- order : 0;
+ order: 0;
}
}
@for $i from -20 through 20 {
- $order : '';
- $suffix : '';
+ $order: '';
+ $suffix: '';
@each $s in $sizes {
- @if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
- @else { $suffix : '="#{$i}"'; }
+ @if $s != '' {
+ $suffix: '-#{$s}="#{$i}"';
+ } @else {
+ $suffix: '="#{$i}"';
+ }
- $order : '[flex-order#{$suffix}]';
+ $order: '[flex-order#{$suffix}]';
}
#{$order} {
@@ -57,18 +59,24 @@ $layout-breakpoint-lg: 1920px !default;
}
}
}
+
@mixin offset-for-name($sizes:null) {
- @if $sizes == null { $sizes : ''; }
+ @if $sizes == null {
+ $sizes: '';
+ }
@for $i from 0 through 19 {
- $offsets : '';
- $suffix : '';
+ $offsets: '';
+ $suffix: '';
@each $s in $sizes {
- @if $s != '' { $suffix : '-#{$s}="#{$i * 5}"'; }
- @else { $suffix : '="#{$i * 5}"'; }
+ @if $s != '' {
+ $suffix: '-#{$s}="#{$i * 5}"';
+ } @else {
+ $suffix: '="#{$i * 5}"';
+ }
- $offsets : $offsets + '[flex-offset#{$suffix}], ';
+ $offsets: $offsets + '[flex-offset#{$suffix}], ';
}
#{$offsets} {
@@ -77,14 +85,17 @@ $layout-breakpoint-lg: 1920px !default;
}
@each $i in 33 {
- $offsets : '';
- $suffix : '';
+ $offsets: '';
+ $suffix: '';
@each $s in $sizes {
- @if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
- @else { $suffix : '="#{$i}"'; }
+ @if $s != '' {
+ $suffix: '-#{$s}="#{$i}"';
+ } @else {
+ $suffix: '="#{$i}"';
+ }
- $offsets : '[flex-offset#{$suffix}], ';
+ $offsets: '[flex-offset#{$suffix}], ';
}
#{$offsets} {
@@ -92,15 +103,18 @@ $layout-breakpoint-lg: 1920px !default;
}
}
- @each $i in 66 {
- $offsets : '';
- $suffix : '';
+ @each $i in 66 {
+ $offsets: '';
+ $suffix: '';
@each $s in $sizes {
- @if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
- @else { $suffix : '="#{$i}"'; }
+ @if $s != '' {
+ $suffix: '-#{$s}="#{$i}"';
+ } @else {
+ $suffix: '="#{$i}"';
+ }
- $offsets : '[flex-offset#{$suffix}]';
+ $offsets: '[flex-offset#{$suffix}]';
}
#{$offsets} {
@@ -110,8 +124,12 @@ $layout-breakpoint-lg: 1920px !default;
}
@mixin layout-for-name($name: null) {
- @if $name == null { $name : ''; }
- @if $name != '' { $name : '-#{$name}'; }
+ @if $name == null {
+ $name: '';
+ }
+ @if $name != '' {
+ $name: '-#{$name}';
+ }
[layout#{$name}], [layout#{$name}="column"], [layout#{$name}="row"] {
box-sizing: border-box;
@@ -121,42 +139,69 @@ $layout-breakpoint-lg: 1920px !default;
display: -ms-flexbox;
display: flex;
}
- [layout#{$name}="column"] { flex-direction: column; }
- [layout#{$name}="row"] { flex-direction: row; }
+ [layout#{$name}="column"] {
+ flex-direction: column;
+ }
+ [layout#{$name}="row"] {
+ flex-direction: row;
+ }
}
@mixin flex-properties-for-name($name: null) {
$flexName: 'flex';
@if $name != null {
$flexName: 'flex-#{$name}';
- $name : '-#{$name}';
+ $name: '-#{$name}';
} @else {
- $name : '';
+ $name: '';
}
- [#{$flexName}] { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
+ [#{$flexName}] {
+ flex: 1;
+ box-sizing: border-box;
+ }
+ // === flex: 1 1 0%;
// IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
// Details:
// Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
// Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
// Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
- @media screen\0 {
- [#{$flexName}] {
- flex: 1 1 0%;
- }
+ @media screen \0
+ {
+ [#{$flexName}] {
+ flex: 1 1 0%;
+ }
}
- [#{$flexName}-grow] { flex: 1 1 100%; box-sizing: border-box; }
- [#{$flexName}-initial] { flex: 0 1 auto; box-sizing: border-box; }
- [#{$flexName}-auto] { flex: 1 1 auto; box-sizing: border-box; }
- [#{$flexName}-none] { flex: 0 0 auto; box-sizing: border-box; }
- [#{$flexName}-noshrink] { flex: 1 0 auto; box-sizing: border-box; }
- [#{$flexName}-nogrow] { flex: 0 1 auto; box-sizing: border-box; }
+ [#{$flexName}-grow] {
+ flex: 1 1 100%;
+ box-sizing: border-box;
+ }
+ [#{$flexName}-initial] {
+ flex: 0 1 auto;
+ box-sizing: border-box;
+ }
+ [#{$flexName}-auto] {
+ flex: 1 1 auto;
+ box-sizing: border-box;
+ }
+ [#{$flexName}-none] {
+ flex: 0 0 auto;
+ box-sizing: border-box;
+ }
+ [#{$flexName}-noshrink] {
+ flex: 1 0 auto;
+ box-sizing: border-box;
+ }
+ [#{$flexName}-nogrow] {
+ flex: 0 1 auto;
+ box-sizing: border-box;
+ }
// (1-20) * 5 = 0-100%
@for $i from 0 through 20 {
- $value : #{$i * 5 + '%'};
+ $value: #{$i * 5 + '%'};
[#{$flexName}="#{$i * 5}"] {
flex: 1 1 #{$value};
@@ -183,19 +228,60 @@ $layout-breakpoint-lg: 1920px !default;
}
[layout="row"], [layout#{$name}="row"] {
- > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33%; max-width: calc(100% / 3); max-height: 100%; box-sizing: border-box; }
- > [#{$flexName}="34"] , > [#{$flexName}="34"] { flex: 1 1 34%; max-width: 34%; max-height: 100%; box-sizing: border-box; }
- > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66%; max-width: calc(200% / 3); max-height: 100%; box-sizing: border-box; }
- > [#{$flexName}="67"] , > [#{$flexName}="67"] { flex: 1 1 67%; max-width: 67%; max-height: 100%; box-sizing: border-box; }
+ > [#{$flexName}="33"], > [#{$flexName}="33"] {
+ flex: 1 1 33%;
+ max-width: calc(100% / 3);
+ max-height: 100%;
+ box-sizing: border-box;
+ }
+ > [#{$flexName}="34"], > [#{$flexName}="34"] {
+ flex: 1 1 34%;
+ max-width: 34%;
+ max-height: 100%;
+ box-sizing: border-box;
+ }
+ > [#{$flexName}="66"], > [#{$flexName}="66"] {
+ flex: 1 1 66%;
+ max-width: calc(200% / 3);
+ max-height: 100%;
+ box-sizing: border-box;
+ }
+ > [#{$flexName}="67"], > [#{$flexName}="67"] {
+ flex: 1 1 67%;
+ max-width: 67%;
+ max-height: 100%;
+ box-sizing: border-box;
+ }
}
[layout="column"], [layout#{$name}="column"] {
- > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33%; max-width: 100%; max-height: calc(100% / 3); box-sizing: border-box; }
- > [#{$flexName}="34"] , > [#{$flexName}="34"] { flex: 1 1 34%; max-width: 100%; max-height: 34%; box-sizing: border-box; }
- > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66%; max-width: 100%; max-height: calc(200% / 3); box-sizing: border-box; }
- > [#{$flexName}="67"] , > [#{$flexName}="67"] { flex: 1 1 67%; max-width: 100%; max-height: 67%; box-sizing: border-box; }
+ > [#{$flexName}="33"], > [#{$flexName}="33"] {
+ flex: 1 1 33%;
+ max-width: 100%;
+ max-height: calc(100% / 3);
+ box-sizing: border-box;
+ }
+ > [#{$flexName}="34"], > [#{$flexName}="34"] {
+ flex: 1 1 34%;
+ max-width: 100%;
+ max-height: 34%;
+ box-sizing: border-box;
+ }
+ > [#{$flexName}="66"], > [#{$flexName}="66"] {
+ flex: 1 1 66%;
+ max-width: 100%;
+ max-height: calc(200% / 3);
+ box-sizing: border-box;
+ }
+ > [#{$flexName}="67"], > [#{$flexName}="67"] {
+ flex: 1 1 67%;
+ max-width: 100%;
+ max-height: 67%;
+ box-sizing: border-box;
+ }
}
}
+
@mixin layout-align-for-name($suffix: null) {
// Alignment attributes for layout containers' children
@@ -212,8 +298,8 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}],
[#{$name}="start stretch"] // defaults
{
- justify-content :flex-start;
- align-content : stretch;
+ justify-content: flex-start;
+ align-content: stretch;
align-items: stretch;
}
// Main Axis Center
@@ -221,8 +307,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="start start"],
[#{$name}="start center"],
[#{$name}="start end"],
- [#{$name}="start stretch"]
- {
+ [#{$name}="start stretch"] {
justify-content: start;
}
@@ -231,8 +316,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="center start"],
[#{$name}="center center"],
[#{$name}="center end"],
- [#{$name}="center stretch"]
- {
+ [#{$name}="center stretch"] {
justify-content: center;
}
@@ -241,8 +325,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="end center"],
[#{$name}="end start"],
[#{$name}="end end"],
- [#{$name}="end stretch"]
- {
+ [#{$name}="end stretch"] {
justify-content: flex-end;
}
@@ -251,8 +334,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="space-around center"],
[#{$name}="space-around start"],
[#{$name}="space-around end"],
- [#{$name}="space-around stretch"]
- {
+ [#{$name}="space-around stretch"] {
justify-content: space-around;
}
@@ -261,12 +343,10 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="space-between center"],
[#{$name}="space-between start"],
[#{$name}="space-between end"],
- [#{$name}="space-between stretch"]
- {
+ [#{$name}="space-between stretch"] {
justify-content: space-between;
}
-
// Arrange on the Cross Axis
// center, start, end
// stretch is the default for align-items
@@ -277,8 +357,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="center start"],
[#{$name}="end start"],
[#{$name}="space-between start"],
- [#{$name}="space-around start"]
- {
+ [#{$name}="space-around start"] {
align-items: flex-start;
align-content: flex-start;
}
@@ -288,8 +367,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="center center"],
[#{$name}="end center"],
[#{$name}="space-between center"],
- [#{$name}="space-around center"]
- {
+ [#{$name}="space-around center"] {
align-items: center;
align-content: center;
max-width: 100%;
@@ -300,8 +378,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="center center"] > *,
[#{$name}="end center"] > *,
[#{$name}="space-between center"] > *,
- [#{$name}="space-around center"] > *
- {
+ [#{$name}="space-around center"] > * {
max-width: 100%;
box-sizing: border-box;
}
@@ -311,8 +388,7 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="center end"],
[#{$name}="end end"],
[#{$name}="space-between end"],
- [#{$name}="space-around end"]
- {
+ [#{$name}="space-around end"] {
align-items: flex-end;
align-content: flex-end;
}
@@ -322,49 +398,44 @@ $layout-breakpoint-lg: 1920px !default;
[#{$name}="center stretch"],
[#{$name}="end stretch"],
[#{$name}="space-between stretch"],
- [#{$name}="space-around stretch"]
- {
+ [#{$name}="space-around stretch"] {
align-items: stretch;
align-content: stretch;
}
}
+
@mixin layout-padding-margin() {
- [layout-padding] > [flex-sm], [layout-padding] > [flex-lt-md] {
+ [layout-padding] > [flex-sm], [layout-padding] > [flex-lt-md] {
padding: $layout-gutter-width / 4;
}
[layout-padding],
[layout-padding] > [flex],
[layout-padding] > [flex-gt-sm],
[layout-padding] > [flex-md],
- [layout-padding] > [flex-lt-lg]
- {
+ [layout-padding] > [flex-lt-lg] {
padding: $layout-gutter-width / 2;
}
[layout-padding] > [flex-gt-md],
- [layout-padding] > [flex-lg]
- {
+ [layout-padding] > [flex-lg] {
padding: $layout-gutter-width / 1;
}
[layout-margin] > [flex-sm],
- [layout-margin] > [flex-lt-md]
- {
+ [layout-margin] > [flex-lt-md] {
margin: $layout-gutter-width / 4;
}
[layout-margin],
- [layout-margin] > [flex],
- [layout-margin] > [flex-gt-sm],
- [layout-margin] > [flex-md],
- [layout-margin] > [flex-lt-lg]
- {
+ [layout-margin] > [flex],
+ [layout-margin] > [flex-gt-sm],
+ [layout-margin] > [flex-md],
+ [layout-margin] > [flex-lt-lg] {
margin: $layout-gutter-width / 2;
}
- [layout-margin] > [flex-gt-md],
- [layout-margin] > [flex-lg]
- {
+ [layout-margin] > [flex-gt-md],
+ [layout-margin] > [flex-lg] {
margin: $layout-gutter-width / 1;
}
@@ -373,7 +444,7 @@ $layout-breakpoint-lg: 1920px !default;
}
[layout-nowrap] {
- flex-wrap: nowrap;
+ flex-wrap: nowrap;
}
[layout-fill] {
@@ -385,12 +456,12 @@ $layout-breakpoint-lg: 1920px !default;
}
@mixin layouts_for_breakpoint($name:null) {
- @include flex-order-for-name($name);
- @include offset-for-name($name);
- @include layout-align-for-name($name);
+ @include flex-order-for-name($name);
+ @include offset-for-name($name);
+ @include layout-align-for-name($name);
- @include flex-properties-for-name($name);
- @include layout-for-name($name);
+ @include flex-properties-for-name($name);
+ @include layout-for-name($name);
}
/*
@@ -398,11 +469,9 @@ $layout-breakpoint-lg: 1920px !default;
*
*/
-
@include layouts_for_breakpoint();
@include layout-padding-margin();
-
/**
* `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
* `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
@@ -416,7 +485,6 @@ $layout-breakpoint-lg: 1920px !default;
* $layout-breakpoint-lg: 1920px !default;
*/
-
@media (max-width: $layout-breakpoint-xs - 1) {
// Xtra-SMALL SCREEN
[hide-xs], [hide] {
@@ -455,13 +523,13 @@ $layout-breakpoint-lg: 1920px !default;
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
// MEDIUM SCREEN
[hide], [hide-gt-xs], [hide-gt-sm] {
- &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
- display: none;
- }
- }
- [hide-md]:not([show-md]):not([show]) {
+ &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
display: none;
}
+ }
+ [hide-md]:not([show-md]):not([show]) {
+ display: none;
+ }
@include layouts_for_breakpoint(md);
}
@@ -472,14 +540,14 @@ $layout-breakpoint-lg: 1920px !default;
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
// LARGE SCREEN
- [hide],[hide-gt-xs], [hide-gt-sm], [hide-gt-md] {
- &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
- display: none;
- }
- }
- [hide-lg]:not([show-lg]):not([show]) {
+ [hide], [hide-gt-xs], [hide-gt-sm], [hide-gt-md] {
+ &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
display: none;
}
+ }
+ [hide-lg]:not([show-lg]):not([show]) {
+ display: none;
+ }
@include layouts_for_breakpoint(lg);
}
diff --git a/ng2-material/core/style/palette.scss b/ng2-material/core/style/palette.scss
index 2f5bf3e9..82b6279b 100644
--- a/ng2-material/core/style/palette.scss
+++ b/ng2-material/core/style/palette.scss
@@ -324,7 +324,6 @@ $md-blue-grey: (
A700: #455a64,
);
-
$md-light-theme-foreground: (
divider: rgba(black, 0.12),
dividers: rgba(black, 0.12),
@@ -349,7 +348,6 @@ $md-dark-theme-foreground: (
text: white
);
-
// Contrast colors. These are hard-coded because it is too difficult to calculate them.
// These contrast colors are pulled from the public Material Design spec swatches. While the
// contrast colors in the spec are not perscriptive, we will use them for convenience.
diff --git a/ng2-material/core/style/shadows.scss b/ng2-material/core/style/shadows.scss
index 4d74e7e2..585c74e9 100644
--- a/ng2-material/core/style/shadows.scss
+++ b/ng2-material/core/style/shadows.scss
@@ -6,8 +6,8 @@ $md-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
// Whiteframes
-$shadow-key-umbra-opacity: 0.2;
-$shadow-key-penumbra-opacity: 0.14;
+$shadow-key-umbra-opacity: 0.2;
+$shadow-key-penumbra-opacity: 0.14;
$shadow-ambient-shadow-opacity: 0.12;
// NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
diff --git a/ng2-material/core/style/structure.scss b/ng2-material/core/style/structure.scss
index 3f6de0f9..355d0c86 100644
--- a/ng2-material/core/style/structure.scss
+++ b/ng2-material/core/style/structure.scss
@@ -2,7 +2,7 @@
html, body {
height: 100%;
- color: rgba(0,0,0,0.87);
+ color: rgba(0, 0, 0, 0.87);
background: white;
position: relative;
}
@@ -15,6 +15,7 @@ body {
[tabindex='-1']:focus {
outline: none;
}
+
.inset {
padding: 10px;
}
@@ -91,6 +92,7 @@ input {
.md-shadow-bottom-z-1 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
+
.md-shadow-bottom-z-2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}
@@ -137,11 +139,11 @@ input {
&.md-ripple-placed {
$sizeDuration: 0.45s * 2;
transition: margin $sizeDuration $swift-ease-out-timing-function,
- border $sizeDuration $swift-ease-out-timing-function,
- width $sizeDuration $swift-ease-out-timing-function,
- height $sizeDuration $swift-ease-out-timing-function,
- opacity $sizeDuration $swift-ease-out-timing-function,
- transform $sizeDuration $swift-ease-out-timing-function;
+ border $sizeDuration $swift-ease-out-timing-function,
+ width $sizeDuration $swift-ease-out-timing-function,
+ height $sizeDuration $swift-ease-out-timing-function,
+ opacity $sizeDuration $swift-ease-out-timing-function,
+ transform $sizeDuration $swift-ease-out-timing-function;
}
&.md-ripple-scaled {
transform: translate(-50%, -50%) scale(1);
@@ -186,6 +188,7 @@ input {
-ms-user-select: none;
user-select: none;
}
+
@media (min-width: $layout-breakpoint-sm) {
.md-padding {
padding: 16px;
diff --git a/ng2-material/core/style/theme-functions.scss b/ng2-material/core/style/theme-functions.scss
index 4a3537ee..02002901 100644
--- a/ng2-material/core/style/theme-functions.scss
+++ b/ng2-material/core/style/theme-functions.scss
@@ -14,7 +14,6 @@
@return map-get(map-get($contrast-color-map, $color-map), $hue);
}
-
// Creates a map of hues to colors for a theme.
// $color-map
// $primary
@@ -25,7 +24,6 @@
default: map-get($color-map, $primary),
lighter: map-get($color-map, $lighter),
darker: map-get($color-map, $darker),
-
default-contrast: md-contrast($color-map, $primary, $contrast-color-map),
lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map),
darker-contrast: md-contrast($color-map, $darker, $contrast-color-map)
diff --git a/ng2-material/core/style/typography.scss b/ng2-material/core/style/typography.scss
index aaa08b8f..4367f17d 100644
--- a/ng2-material/core/style/typography.scss
+++ b/ng2-material/core/style/typography.scss
@@ -6,7 +6,7 @@
// render text using sub-pixel anti-aliasing.
html, body {
- -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
min-height: 100%; // [2]
@@ -32,46 +32,56 @@ ul, ol, p, h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.010em;
line-height: $display-4-font-size-base;
}
+
.md-display-3 {
font-size: $display-3-font-size-base;
font-weight: 400;
letter-spacing: -0.005em;
line-height: $display-3-font-size-base;
}
+
.md-display-2 {
font-size: $display-2-font-size-base;
font-weight: 400;
line-height: rem(6.4);
}
+
.md-display-1 {
font-size: $display-1-font-size-base;
font-weight: 400;
line-height: rem(4);
}
+
.md-headline {
font-size: $headline-font-size-base;
font-weight: 400;
line-height: rem(3.2);
}
+
.md-title {
@include md-title();
}
+
.md-subhead {
@include md-subhead();
}
+
/************
* Body Copy
************/
.md-body-1 {
@include md-body-1();
}
+
.md-body-2 {
@include md-body-2();
}
+
.md-caption {
font-size: $caption-font-size-base;
letter-spacing: 0.020em;
}
+
.md-button {
letter-spacing: 0.010em;
}
diff --git a/ng2-material/core/style/variables.scss b/ng2-material/core/style/variables.scss
index 781932ae..e365fe1d 100644
--- a/ng2-material/core/style/variables.scss
+++ b/ng2-material/core/style/variables.scss
@@ -3,57 +3,52 @@
// Typography
// ------------------------------
$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
-$font-size: 10px;
+$font-size: 10px;
$display-4-font-size-base: rem(11.20) !default;
$display-3-font-size-base: rem(5.600) !default;
$display-2-font-size-base: rem(4.500) !default;
$display-1-font-size-base: rem(3.400) !default;
-$headline-font-size-base: rem(2.400) !default;
-$title-font-size-base: rem(2.000) !default;
-$subhead-font-size-base: rem(1.600) !default;
+$headline-font-size-base: rem(2.400) !default;
+$title-font-size-base: rem(2.000) !default;
+$subhead-font-size-base: rem(1.600) !default;
-$body-font-size-base: rem(1.400) !default;
-$caption-font-size-base: rem(1.200) !default;
+$body-font-size-base: rem(1.400) !default;
+$caption-font-size-base: rem(1.200) !default;
// Layout
-$baseline-grid: 8px !default;
-$layout-breakpoint-xs: 600px !default;
-$layout-breakpoint-sm: 600px !default;
-$layout-breakpoint-md: 960px !default;
-$layout-breakpoint-lg: 1280px !default;
-$layout-gutter-width: ($baseline-grid * 2) !default;
+$baseline-grid: 8px !default;
+$layout-breakpoint-xs: 600px !default;
+$layout-breakpoint-sm: 600px !default;
+$layout-breakpoint-md: 960px !default;
+$layout-breakpoint-lg: 1280px !default;
+$layout-gutter-width: ($baseline-grid * 2) !default;
// Typography
$md-body-font-size-base: rem(1.400) !default;
-
// App bar variables
$app-bar-height: 64px;
// Icons
$icon-size: rem(2.4);
-
-
// Toast
$toast-height: $baseline-grid * 3 !default;
$toast-margin: $baseline-grid * 1 !default;
-
// Whiteframes
-$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26) !default;
+$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
$whiteframe-zindex-z1: 1 !default;
-$whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2) !default;
+$whiteframe-shadow-z2: 0px 8px 17px rgba(0, 0, 0, 0.2) !default;
$whiteframe-zindex-z2: 2 !default;
-$whiteframe-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19) !default;
+$whiteframe-shadow-z3: 0px 17px 50px rgba(0, 0, 0, 0.19) !default;
$whiteframe-zindex-z3: 3 !default;
-$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22) !default;
+$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0, 0, 0, 0.22) !default;
$whiteframe-zindex-z4: 4 !default;
-$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
+$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
$whiteframe-zindex-z5: 5 !default;
-
// Z-indexes
$z-index-tooltip: 100 !default;
$z-index-dialog: 80 !default;
@@ -66,7 +61,6 @@ $z-index-toolbar: 30 !default;
$z-index-fab: 20 !default;
$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
-
// Easing Curves
$swift-ease-out-duration: 0.4s !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
diff --git a/ng2-material/core/util/animate.ts b/ng2-material/core/util/animate.ts
index ab0a7e06..18f953d3 100644
--- a/ng2-material/core/util/animate.ts
+++ b/ng2-material/core/util/animate.ts
@@ -17,15 +17,21 @@ export class Animate {
DOM.addClass(el, cssClass + '-add');
TimerWrapper.setTimeout(() => {
var duration = Animate.getTransitionDuration(el, true);
- var callTimeout = setTimeout(() => done(), duration);
- var done = () => {
+ var callTimeout = TimerWrapper.setTimeout(() => done(true), duration);
+ var done = (timeout) => {
+ if (!removeListener) {
+ return;
+ }
DOM.removeClass(el, cssClass + '-add-active');
DOM.removeClass(el, cssClass + '-add');
- clearTimeout(callTimeout);
+ if (!timeout) {
+ TimerWrapper.clearTimeout(callTimeout);
+ }
removeListener();
+ removeListener = null;
resolve();
};
- let removeListener = DOM.onAndCancel(el, Animate.TRANSITION_EVENT, done);
+ let removeListener = DOM.onAndCancel(el, Animate.TRANSITION_EVENT, () => done(false));
DOM.addClass(el, cssClass + '-add-active');
DOM.addClass(el, cssClass);
}, 1);
@@ -37,13 +43,19 @@ export class Animate {
DOM.addClass(el, cssClass + '-remove');
TimerWrapper.setTimeout(() => {
var duration = Animate.getTransitionDuration(el, true);
- var callTimeout = setTimeout(() => done(), duration);
+ var callTimeout = TimerWrapper.setTimeout(() => done(true), duration);
- var done = () => {
+ var done = (timeout) => {
+ if (!removeListener) {
+ return;
+ }
DOM.removeClass(el, cssClass + '-remove-active');
DOM.removeClass(el, cssClass + '-remove');
- clearTimeout(callTimeout);
+ if (!timeout) {
+ TimerWrapper.clearTimeout(callTimeout);
+ }
removeListener();
+ removeListener = null;
resolve();
};
let removeListener = DOM.onAndCancel(el, Animate.TRANSITION_EVENT, done);
@@ -94,7 +106,7 @@ export class Animate {
static whichTransitionEvent(): string {
var t: string;
var el: any = document.createElement('fakeelement');
- var transitions: {[prefix:string]:string} = {
+ var transitions: {[prefix: string]: string} = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
@@ -108,15 +120,21 @@ export class Animate {
}
}
- static animateStyles(element: HTMLElement, styles: {[style:string]:string|number}, durationMs: number): Promise {
+ static animateStyles(element: HTMLElement, styles: {[style: string]: string|number}, durationMs: number): Promise {
let saveDuration = Animate.getTransitionDuration(element);
Animate.setTransitionDuration(element, durationMs);
return new Promise((animResolve, animReject) => {
- let callTimeout = setTimeout(() => done(), durationMs);
+ let callTimeout = TimerWrapper.setTimeout(() => done(true), durationMs);
- let done = () => {
- clearTimeout(callTimeout);
+ let done = (timeout) => {
+ if (!removeListener) {
+ return;
+ }
+ if (timeout) {
+ TimerWrapper.clearTimeout(callTimeout);
+ }
removeListener();
+ removeListener = null;
if (saveDuration !== -1) {
Animate.setTransitionDuration(element, saveDuration);
}
@@ -125,7 +143,7 @@ export class Animate {
}
animResolve();
};
- let removeListener = DOM.onAndCancel(element, Animate.TRANSITION_EVENT, done);
+ let removeListener = DOM.onAndCancel(element, Animate.TRANSITION_EVENT, () => done(false));
Object.keys(styles).forEach((key: string) => {
DOM.setStyle(element, key, `${styles[key]}`);
});
@@ -136,7 +154,7 @@ export class Animate {
/**
* Set CSS styles immediately by turning off transition duration and restoring it afterward
*/
- static setStyles(element: HTMLElement, styles: {[style:string]:string|number}): Promise {
+ static setStyles(element: HTMLElement, styles: {[style: string]: string|number}): Promise {
let saveDuration = Animate.getTransitionDuration(element);
Animate.setTransitionDuration(element, 0);
return new Promise((resolve, reject) => {
diff --git a/ng2-material/core/util/media.ts b/ng2-material/core/util/media.ts
index ad324446..f018753b 100644
--- a/ng2-material/core/util/media.ts
+++ b/ng2-material/core/util/media.ts
@@ -81,8 +81,8 @@ export class MediaListener {
}
interface IMediaQueryCache {
- references:number;
- mql:MediaQueryList;
+ references: number;
+ mql: MediaQueryList;
}
/**
@@ -90,7 +90,7 @@ interface IMediaQueryCache {
*/
@Injectable()
export class Media {
- private _cache: {[query:string]:IMediaQueryCache} = {};
+ private _cache: {[query: string]: IMediaQueryCache} = {};
listen(query: string): MediaListener {
let listener = this._cache[query];
@@ -112,7 +112,7 @@ export class Media {
}
}
- hasMedia(size:string): boolean {
+ hasMedia(size: string): boolean {
return Media.hasMedia(size);
}
diff --git a/ng2-material/core/util/util.ts b/ng2-material/core/util/util.ts
index c3065e23..f9fed186 100644
--- a/ng2-material/core/util/util.ts
+++ b/ng2-material/core/util/util.ts
@@ -1,5 +1,4 @@
-import {isPresent} from "angular2/src/facade/lang";
-import {NumberWrapper} from "angular2/src/facade/lang";
+import {isPresent, NumberWrapper} from "angular2/src/facade/lang";
/**
* Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for
@@ -7,13 +6,15 @@ import {NumberWrapper} from "angular2/src/facade/lang";
* @param wait Integer value of msecs to delay (since last debounce reset); default value 10 msecs
*/
export function debounce(func, wait, scope) {
- var timer;
+ var timer = null;
return function debounced() {
var context = scope,
args = Array.prototype.slice.call(arguments);
- clearTimeout(timer);
+ if(timer) {
+ clearTimeout(timer);
+ }
timer = setTimeout(function () {
timer = undefined;
diff --git a/ng2-material/webpack_all.ts b/ng2-material/webpack_all.ts
index 39e2443a..1942cbe1 100644
--- a/ng2-material/webpack_all.ts
+++ b/ng2-material/webpack_all.ts
@@ -1,5 +1,5 @@
-declare var require:any;
-declare var module:any;
+declare var require: any;
+declare var module: any;
module.exports = require('./all.js');
require('style!css!./all.css');
require('style!css!../public/font/font.css');
diff --git a/ng2-material/webpack_styles.ts b/ng2-material/webpack_styles.ts
index 6121d005..a7ec4134 100644
--- a/ng2-material/webpack_styles.ts
+++ b/ng2-material/webpack_styles.ts
@@ -1,3 +1,3 @@
-declare var require:any;
+declare var require: any;
require('style!css!./all.css');
require('style!css!../public/font/font.css');
diff --git a/package.json b/package.json
index 5f40725d..a24476ff 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,12 @@
"test": "npm install"
},
"dependencies": {
- "angular2": "^2.0.0-beta.9",
- "es6-promise": "^3.0.2",
- "es6-shim": "^0.33.3",
+ "angular2": ">=2.0.0-beta.11",
+ "es6-promise": ">=3.0.2",
+ "es6-shim": ">=0.35.0",
"reflect-metadata": "0.1.2",
- "rxjs": "^5.0.0-beta.2",
- "zone.js": "^0.5.15"
+ "rxjs": ">=5.0.0-beta.2",
+ "zone.js": ">=0.6.4"
},
"typings": "dist/ng2-material.d.ts",
"devDependencies": {
diff --git a/test/bootstrap.ts b/test/bootstrap.ts
index 27f74e0d..2576d46d 100644
--- a/test/bootstrap.ts
+++ b/test/bootstrap.ts
@@ -1,5 +1,5 @@
declare var System: any;
-declare var zone: any;
+declare var Zone: any;
import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from "angular2/platform/testing/browser";
import {setBaseTestProviders} from "angular2/testing";
@@ -27,7 +27,8 @@ export function load(files: string[]): Promise {
let error = (e: any) => {
console.error(e);
};
- var myZone = zone.fork({
+ var myZone = new Zone();
+ myZone.fork({
onError: (e) => {
console.error("Zone Error:");
console.error(e);
diff --git a/test/components/backdrop/backdrop_spec.ts b/test/components/backdrop/backdrop_spec.ts
index d8917200..9c764188 100644
--- a/test/components/backdrop/backdrop_spec.ts
+++ b/test/components/backdrop/backdrop_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {MdBackdrop} from "../../../ng2-material/components/backdrop/backdrop";
import {By} from "angular2/platform/browser";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
@@ -38,7 +38,7 @@ export function main() {
return promiseWait()
.then(() => builder.createAsync(TestComponent))
.then((fixture: ComponentFixture) => {
- let debug:DebugElement = fixture.debugElement.query(By.css('md-backdrop'));
+ let debug: DebugElement = fixture.debugElement.query(By.css('md-backdrop'));
let backdrop = debug.componentInstance;
backdrop.transitionAddClass = transitionAddClass;
fixture.detectChanges();
@@ -139,13 +139,14 @@ export function main() {
triggered = true;
return Promise.resolve();
};
- api.backdrop.show().then(() => {
+ let promise = api.backdrop.show();
+ api.debug.nativeElement.click();
+ expect(triggered).toBe(false);
+ return promise.then(() => {
expect(triggered).toBe(false);
api.debug.nativeElement.click();
expect(triggered).toBe(true);
});
- api.debug.nativeElement.click();
- expect(triggered).toBe(false);
});
}));
});
diff --git a/test/components/button/button_spec.ts b/test/components/button/button_spec.ts
index 3b767ab5..ab7c0b6c 100644
--- a/test/components/button/button_spec.ts
+++ b/test/components/button/button_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, ViewMetadata, DebugElement} from "angular2/core";
+import {Component, ViewMetadata, DebugElement} from "angular2/core";
import {MdButton, MdAnchor} from "../../../ng2-material/components/button/button";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {Ink} from "../../../ng2-material/core/util/ink";
diff --git a/test/components/checkbox/checkbox_spec.ts b/test/components/checkbox/checkbox_spec.ts
index 4ba62d24..5ccbf05e 100644
--- a/test/components/checkbox/checkbox_spec.ts
+++ b/test/components/checkbox/checkbox_spec.ts
@@ -9,7 +9,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/common";
import {MdCheckbox} from "ng2-material/components/checkbox/checkbox";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
@@ -20,9 +20,9 @@ import {By} from "angular2/platform/browser";
export function main() {
interface ICheckboxFixture {
- fixture:ComponentFixture;
- comp:MdCheckbox;
- debug:DebugElement;
+ fixture: ComponentFixture;
+ comp: MdCheckbox;
+ debug: DebugElement;
}
@Component({
selector: 'test-app',
diff --git a/test/components/dialog/dialog_spec.ts b/test/components/dialog/dialog_spec.ts
index d302a77b..28643734 100644
--- a/test/components/dialog/dialog_spec.ts
+++ b/test/components/dialog/dialog_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement, ElementRef} from "angular2/core";
+import {Component, DebugElement, ElementRef} from "angular2/core";
import {MdDialogRef, MdDialogConfig, MdDialog, MdDialogBasic} from "../../../ng2-material/components/dialog/dialog";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {By} from "angular2/platform/browser";
diff --git a/test/components/form/messages_spec.ts b/test/components/form/messages_spec.ts
index 66096163..dab55d75 100644
--- a/test/components/form/messages_spec.ts
+++ b/test/components/form/messages_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View} from "angular2/core";
+import {Component} from "angular2/core";
import {MdMessage, MdMessages} from "../../../ng2-material/components/form/messages";
import {CORE_DIRECTIVES, FORM_DIRECTIVES, Control} from "angular2/common";
import {By} from "angular2/platform/browser";
@@ -18,9 +18,9 @@ import {promiseWait} from "../../util";
export function main() {
interface IFormMessagesFixture {
- fixture:ComponentFixture;
- container:MdMessages;
- messages:MdMessage[];
+ fixture: ComponentFixture;
+ container: MdMessages;
+ messages: MdMessage[];
}
@Component({
selector: 'test-app',
diff --git a/test/components/form/validators_spec.ts b/test/components/form/validators_spec.ts
index 3a0f65b0..33299ebc 100644
--- a/test/components/form/validators_spec.ts
+++ b/test/components/form/validators_spec.ts
@@ -1,5 +1,5 @@
import {describe, it, expect} from "angular2/testing";
-import {Control, Validators} from "angular2/common";
+import {Control} from "angular2/common";
import {MdPatternValidator, MdNumberRequiredValidator} from "../../../ng2-material/components/form/validators";
export function main() {
diff --git a/test/components/ink/ink_spec.ts b/test/components/ink/ink_spec.ts
index 200496c8..97352c4e 100644
--- a/test/components/ink/ink_spec.ts
+++ b/test/components/ink/ink_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {Ink} from "../../../ng2-material/core/util/ink";
import {By} from "angular2/platform/browser";
diff --git a/test/components/input/input_spec.ts b/test/components/input/input_spec.ts
index 5abdae88..37198efc 100644
--- a/test/components/input/input_spec.ts
+++ b/test/components/input/input_spec.ts
@@ -9,7 +9,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement, Input} from "angular2/core";
+import {Component, DebugElement, Input} from "angular2/core";
import {MdInput, MdInputContainer} from "../../../ng2-material/components/input/input";
import {By} from "angular2/platform/browser";
@@ -19,11 +19,11 @@ export function main() {
componentSanityCheck('Input Container', 'md-input-container', template);
interface IInputFixture {
- fixture:ComponentFixture;
- input:MdInput;
- container:MdInputContainer;
- inputDebug:DebugElement;
- containerDebug:DebugElement;
+ fixture: ComponentFixture;
+ input: MdInput;
+ container: MdInputContainer;
+ inputDebug: DebugElement;
+ containerDebug: DebugElement;
}
@Component({
@@ -33,7 +33,8 @@ export function main() {
})
class TestComponent {
- @Input() boundValue;
+ @Input()
+ boundValue;
}
describe('Input', () => {
diff --git a/test/components/peekaboo/peekaboo_spec.ts b/test/components/peekaboo/peekaboo_spec.ts
index 15152601..1fbfa366 100644
--- a/test/components/peekaboo/peekaboo_spec.ts
+++ b/test/components/peekaboo/peekaboo_spec.ts
@@ -8,16 +8,16 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {MdPeekaboo, PeekabooAction} from "../../../ng2-material/components/peekaboo/peekaboo";
import {By} from "angular2/platform/browser";
export function main() {
interface IPeekabooFixture {
- fixture:ComponentFixture;
- peek:MdPeekaboo;
- debug:DebugElement;
+ fixture: ComponentFixture;
+ peek: MdPeekaboo;
+ debug: DebugElement;
}
@Component({
diff --git a/test/components/progress_circular/progress_circular_spec.ts b/test/components/progress_circular/progress_circular_spec.ts
index a3bc0163..84bb8195 100644
--- a/test/components/progress_circular/progress_circular_spec.ts
+++ b/test/components/progress_circular/progress_circular_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/common";
import {ProgressMode} from "../../../ng2-material/components/progress_linear/progress_linear";
import {MdProgressCircular} from "../../../ng2-material/components/progress_circular/progress_circular";
@@ -17,9 +17,9 @@ import {By} from "angular2/platform/browser";
export function main() {
interface IProgressFixture {
- fixture:ComponentFixture;
- progress:MdProgressCircular;
- debug:DebugElement;
+ fixture: ComponentFixture;
+ progress: MdProgressCircular;
+ debug: DebugElement;
}
@Component({
selector: 'test-app',
diff --git a/test/components/progress_linear/progress_linear_spec.ts b/test/components/progress_linear/progress_linear_spec.ts
index a1838659..6f639509 100644
--- a/test/components/progress_linear/progress_linear_spec.ts
+++ b/test/components/progress_linear/progress_linear_spec.ts
@@ -8,7 +8,7 @@ import {
ComponentFixture,
injectAsync
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/common";
import {MdProgressLinear, ProgressMode} from "../../../ng2-material/components/progress_linear/progress_linear";
import {By} from "angular2/platform/browser";
@@ -16,9 +16,9 @@ import {By} from "angular2/platform/browser";
export function main() {
interface IProgressFixture {
- fixture:ComponentFixture;
- progress:MdProgressLinear;
- debug:DebugElement;
+ fixture: ComponentFixture;
+ progress: MdProgressLinear;
+ debug: DebugElement;
}
@Component({
selector: 'test-app',
diff --git a/test/components/radio/radio_spec.ts b/test/components/radio/radio_spec.ts
index 73f35afa..c1d793dc 100644
--- a/test/components/radio/radio_spec.ts
+++ b/test/components/radio/radio_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {MdRadioGroup, MdRadioButton} from "../../../ng2-material/components/radio/radio_button";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {KeyCodes} from "../../../ng2-material/core/key_codes";
diff --git a/test/components/sidenav/sidenav_service_spec.ts b/test/components/sidenav/sidenav_service_spec.ts
index 58f404c2..b0735c1a 100644
--- a/test/components/sidenav/sidenav_service_spec.ts
+++ b/test/components/sidenav/sidenav_service_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {By} from "angular2/platform/browser";
import {MdSidenav} from "../../../ng2-material/components/sidenav/sidenav";
import {SidenavService} from "../../../ng2-material/components/sidenav/sidenav_service";
@@ -16,9 +16,9 @@ import {SidenavService} from "../../../ng2-material/components/sidenav/sidenav_s
export function main() {
interface ITestFixture {
- fixture:ComponentFixture;
- component:MdSidenav;
- debug:DebugElement;
+ fixture: ComponentFixture;
+ component: MdSidenav;
+ debug: DebugElement;
}
@Component({
diff --git a/test/components/sidenav/sidenav_spec.ts b/test/components/sidenav/sidenav_spec.ts
index 48aa7364..f630d70f 100644
--- a/test/components/sidenav/sidenav_spec.ts
+++ b/test/components/sidenav/sidenav_spec.ts
@@ -8,7 +8,7 @@ import {
injectAsync,
ComponentFixture
} from "angular2/testing";
-import {Component, View, DebugElement} from "angular2/core";
+import {Component, DebugElement} from "angular2/core";
import {By} from "angular2/platform/browser";
import {
MdSidenav,
@@ -22,11 +22,11 @@ import {promiseWait} from "../../util";
export function main() {
interface ITestFixture {
- fixture:ComponentFixture;
- component:MdSidenav;
- container?:MdSidenavContainer;
- cdebug:DebugElement;
- debug:DebugElement;
+ fixture: ComponentFixture;
+ component: MdSidenav;
+ container?: MdSidenavContainer;
+ cdebug: DebugElement;
+ debug: DebugElement;
}
@Component({
diff --git a/test/components/tabs/tabs_spec.ts b/test/components/tabs/tabs_spec.ts
index be3055ca..d2f05cbb 100644
--- a/test/components/tabs/tabs_spec.ts
+++ b/test/components/tabs/tabs_spec.ts
@@ -8,7 +8,7 @@ import {
ComponentFixture,
injectAsync
} from "angular2/testing";
-import {Component, View} from "angular2/core";
+import {Component} from "angular2/core";
import {MdTab, MdTabs} from "../../../ng2-material/components/tabs/tabs";
import {CORE_DIRECTIVES} from "angular2/common";
import {Ink} from "../../../ng2-material/core/util/ink";
@@ -17,9 +17,9 @@ import {By} from "angular2/platform/browser";
export function main() {
interface ITabsFixture {
- fixture:ComponentFixture;
- tabs:MdTabs;
- tabButtons:HTMLElement[];
+ fixture: ComponentFixture;
+ tabs: MdTabs;
+ tabButtons: HTMLElement[];
}
@Component({
selector: 'test-app',
diff --git a/test/components/toolbar/toolbar_spec.ts b/test/components/toolbar/toolbar_spec.ts
index ef739e2b..c0cd80ee 100644
--- a/test/components/toolbar/toolbar_spec.ts
+++ b/test/components/toolbar/toolbar_spec.ts
@@ -8,7 +8,7 @@ import {
ComponentFixture,
injectAsync
} from "angular2/testing";
-import {Component, View} from "angular2/core";
+import {Component} from "angular2/core";
import {MdToolbar} from "../../../ng2-material/components/toolbar/toolbar";
import {By} from "angular2/platform/browser";
diff --git a/test/test_url_resolver.ts b/test/test_url_resolver.ts
index d3731367..fde136ef 100644
--- a/test/test_url_resolver.ts
+++ b/test/test_url_resolver.ts
@@ -1,4 +1,4 @@
-import {UrlResolver} from 'angular2/src/compiler/url_resolver';
+import {UrlResolver} from "angular2/src/compiler/url_resolver";
export class TestUrlResolver extends UrlResolver {
constructor() {
diff --git a/test/util.ts b/test/util.ts
index 0b1eb0fc..dafdc1f5 100644
--- a/test/util.ts
+++ b/test/util.ts
@@ -1,5 +1,5 @@
///
-import {Component, View} from "angular2/core";
+import {Component} from "angular2/core";
import {ComponentFixture, TestComponentBuilder, beforeEach, describe, inject, it, injectAsync} from "angular2/testing";
import {MATERIAL_DIRECTIVES} from "../ng2-material/all";
import {TimerWrapper} from "angular2/src/facade/async";