diff --git a/modules/angular2_material/.clang-format b/modules/angular2_material/.clang-format new file mode 100644 index 000000000000..e60fec73575e --- /dev/null +++ b/modules/angular2_material/.clang-format @@ -0,0 +1,12 @@ +Language: JavaScript +BasedOnStyle: Google +ColumnLimit: 100 + +TabWidth: 2 +ContinuationIndentWidth: 4 +MaxEmptyLinesToKeep : 2 + +AllowShortBlocksOnASingleLine: false +AllowShortIfStatementsOnASingleLine: false +AllowShortLoopsOnASingleLine: false +AllowShortFunctionsOnASingleLine: Empty diff --git a/modules/angular2_material/src/components/button/button.js b/modules/angular2_material/src/components/button/button.ts similarity index 75% rename from modules/angular2_material/src/components/button/button.js rename to modules/angular2_material/src/components/button/button.ts index 75ace5f6af43..be01e2e910d5 100644 --- a/modules/angular2_material/src/components/button/button.js +++ b/modules/angular2_material/src/components/button/button.ts @@ -1,5 +1,4 @@ -import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; +import {Component, View, onChange} from 'angular2/angular2'; import {isPresent} from 'angular2/src/facade/lang'; @@ -12,16 +11,12 @@ export class MdButton { @Component({ selector: '[md-button][href]', - properties: { - 'disabled': 'disabled' - }, + properties: {'disabled': 'disabled'}, hostListeners: {'click': 'onClick($event)'}, hostProperties: {'tabIndex': 'tabIndex'}, lifecycle: [onChange] }) -@View({ - templateUrl: 'angular2_material/src/components/button/button.html' -}) +@View({templateUrl: 'angular2_material/src/components/button/button.html'}) export class MdAnchor { tabIndex: number; diff --git a/modules/angular2_material/src/components/checkbox/checkbox.js b/modules/angular2_material/src/components/checkbox/checkbox.ts similarity index 68% rename from modules/angular2_material/src/components/checkbox/checkbox.js rename to modules/angular2_material/src/components/checkbox/checkbox.ts index 5d5d50bc793e..98adabd27158 100644 --- a/modules/angular2_material/src/components/checkbox/checkbox.js +++ b/modules/angular2_material/src/components/checkbox/checkbox.ts @@ -1,20 +1,13 @@ -import {Component} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; -import {Attribute} from 'angular2/src/core/annotations_impl/di'; +import {Component, View, Attribute} from 'angular2/angular2'; import {isPresent} from 'angular2/src/facade/lang'; -import {KEY_SPACE} from 'angular2_material/src/core/constants' +import {KEY_SPACE} from 'angular2_material/src/core/constants'; import {KeyboardEvent} from 'angular2/src/facade/browser'; import {NumberWrapper} from 'angular2/src/facade/lang'; @Component({ selector: 'md-checkbox', - properties: { - 'checked': 'checked', - 'disabled': 'disabled' - }, - hostListeners: { - 'keydown': 'onKeydown($event)' - }, + properties: {'checked': 'checked', 'disabled': 'disabled'}, + hostListeners: {'keydown': 'onKeydown($event)'}, hostProperties: { 'tabindex': 'tabindex', 'role': 'attr.role', @@ -22,10 +15,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang'; 'disabled': 'attr.aria-disabled' } }) -@View({ - templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', - directives: [] -}) +@View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []}) export class MdCheckbox { /** Whether this checkbox is checked. */ checked: boolean; @@ -39,7 +29,7 @@ export class MdCheckbox { /** Setter for tabindex */ tabindex: number; - constructor(@Attribute('tabindex') tabindex: String) { + constructor(@Attribute('tabindex') tabindex: string) { this.role = 'checkbox'; this.checked = false; this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0; diff --git a/modules/angular2_material/src/components/dialog/dialog.js b/modules/angular2_material/src/components/dialog/dialog.js index 3e23f16227b5..6e510da1ce7d 100644 --- a/modules/angular2_material/src/components/dialog/dialog.js +++ b/modules/angular2_material/src/components/dialog/dialog.js @@ -4,7 +4,7 @@ import {ObservableWrapper, Promise, PromiseWrapper} from 'angular2/src/facade/as import {isPresent, Type} from 'angular2/src/facade/lang'; import {DOM} from 'angular2/src/dom/dom_adapter'; import {MouseEvent, KeyboardEvent} from 'angular2/src/facade/browser'; -import {KEY_ESC} from 'angular2_material/src/core/constants' +import {KEY_ESC} from 'angular2_material/src/core/constants'; // TODO(radokirov): Once the application is transpiled by TS instead of Traceur, // add those imports back into 'angular2/angular2'; diff --git a/modules/angular2_material/src/components/grid_list/grid_list.js b/modules/angular2_material/src/components/grid_list/grid_list.ts similarity index 94% rename from modules/angular2_material/src/components/grid_list/grid_list.js rename to modules/angular2_material/src/components/grid_list/grid_list.ts index eb1440eb837c..9d9fdd4224ed 100644 --- a/modules/angular2_material/src/components/grid_list/grid_list.js +++ b/modules/angular2_material/src/components/grid_list/grid_list.ts @@ -1,8 +1,13 @@ -import {Component, onDestroy, onChange, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; -import {Parent} from 'angular2/src/core/annotations_impl/visibility'; +import {Component, View, Parent, onDestroy, onChange, onAllChangesDone} from 'angular2/angular2'; + import {ListWrapper} from 'angular2/src/facade/collection'; -import {StringWrapper, isPresent, isString, NumberWrapper, RegExpWrapper} from 'angular2/src/facade/lang'; +import { + StringWrapper, + isPresent, + isString, + NumberWrapper, + RegExpWrapper +} from 'angular2/src/facade/lang'; import {Math} from 'angular2/src/facade/math'; // TODO(jelbourn): Set appropriate aria attributes for grid list elements. @@ -14,16 +19,10 @@ import {Math} from 'angular2/src/facade/math'; @Component({ selector: 'md-grid-list', - properties: { - 'cols': 'cols', - 'rowHeight': 'row-height', - 'gutterSize': 'gutter-size' - }, + properties: {'cols': 'cols', 'rowHeight': 'row-height', 'gutterSize': 'gutter-size'}, lifecycle: [onAllChangesDone] }) -@View({ - templateUrl: 'angular2_material/src/components/grid_list/grid_list.html' -}) +@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'}) export class MdGridList { /** List of tiles that are being rendered. */ tiles: List; @@ -218,10 +217,7 @@ export class MdGridList { @Component({ selector: 'md-grid-tile', - properties: { - 'rowspan': 'rowspan', - 'colspan': 'colspan' - }, + properties: {'rowspan': 'rowspan', 'colspan': 'colspan'}, hostProperties: { 'styleHeight': 'style.height', 'styleWidth': 'style.width', @@ -233,9 +229,7 @@ export class MdGridList { }, lifecycle: [onDestroy, onChange] }) -@View({ - templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html' -}) +@View({templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'}) export class MdGridTile { gridList: MdGridList; _rowspan: number; @@ -282,7 +276,6 @@ export class MdGridTile { * Notifies grid-list that a re-layout is required. */ onChange(_) { - //console.log(`grid-tile on-change ${this.gridList.tiles.indexOf(this)}`); if (!this.isRegisteredWithGridList) { this.gridList.addTile(this); this.isRegisteredWithGridList = true; diff --git a/modules/angular2_material/src/components/input/input.js b/modules/angular2_material/src/components/input/input.ts similarity index 77% rename from modules/angular2_material/src/components/input/input.js rename to modules/angular2_material/src/components/input/input.ts index ce0c534ad413..b9e157fab215 100644 --- a/modules/angular2_material/src/components/input/input.js +++ b/modules/angular2_material/src/components/input/input.ts @@ -1,6 +1,4 @@ -import {Directive, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations'; -import {Attribute} from 'angular2/src/core/annotations_impl/di'; -import {Parent} from 'angular2/src/core/annotations_impl/visibility'; +import {Directive, onAllChangesDone, Attribute, Parent} from 'angular2/angular2'; import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async'; @@ -9,12 +7,57 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async'; // TODO(jelbourn): max-length counter // TODO(jelbourn): placeholder property +@Directive({ + selector: 'md-input-container', + lifecycle: [onAllChangesDone], + hostProperties: + {'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'} +}) +export class MdInputContainer { + // The MdInput or MdTextarea inside of this container. + _input: MdInput; + + // Whether the input inside of this container has a non-empty value. + inputHasValue: boolean; + + // Whether the input inside of this container has focus. + inputHasFocus: boolean; + + constructor(@Attribute('id') id: string) { + this._input = null; + this.inputHasValue = false; + this.inputHasFocus = false; + } + + onAllChangesDone() { + // Enforce that this directive actually contains a text input. + if (this._input == null) { + throw 'No or - + --> diff --git a/modules/examples/src/material/input/index.js b/modules/examples/src/material/input/index.js deleted file mode 100644 index e97973b370d2..000000000000 --- a/modules/examples/src/material/input/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import {bootstrap} from 'angular2/angular2'; -import {MdInputContainer, MdInput, MdTextarea} from 'angular2_material/src/components/input/input' -import {UrlResolver} from 'angular2/src/services/url_resolver'; -import {commonDemoSetup, DemoUrlResolver} from '../demo_common'; -import {bind} from 'angular2/di'; - -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; - -@Component({ - selector: 'demo-app' -}) -@View({ - templateUrl: './demo_app.html', - directives: [MdInputContainer, MdInput, MdTextarea] -}) -class DemoApp { - constructor() { - - } -} - -export function main() { - commonDemoSetup(); - bootstrap(DemoApp, [ - bind(UrlResolver).toValue(new DemoUrlResolver()) - ]); -} diff --git a/modules/examples/src/material/input/index.ts b/modules/examples/src/material/input/index.ts new file mode 100644 index 000000000000..9fdc1fd91775 --- /dev/null +++ b/modules/examples/src/material/input/index.ts @@ -0,0 +1,16 @@ +import {bootstrap, Component, View} from 'angular2/angular2'; +import {MdInputContainer, MdInput} from 'angular2_material/src/components/input/input'; +import {UrlResolver} from 'angular2/src/services/url_resolver'; +import {commonDemoSetup, DemoUrlResolver} from '../demo_common'; +import {bind} from 'angular2/di'; + +@Component({selector: 'demo-app'}) +@View({templateUrl: './demo_app.html', directives: [MdInputContainer, MdInput]}) +class DemoApp { + constructor() {} +} + +export function main() { + commonDemoSetup(); + bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]); +} diff --git a/modules/examples/src/material/progress-linear/index.js b/modules/examples/src/material/progress-linear/index.js deleted file mode 100644 index d72ff6105d76..000000000000 --- a/modules/examples/src/material/progress-linear/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import {bootstrap} from 'angular2/angular2'; -import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear' -import {UrlResolver} from 'angular2/src/services/url_resolver'; -import {commonDemoSetup, DemoUrlResolver} from '../demo_common'; -import {bind} from 'angular2/di'; - -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; - -@Component({ - selector: 'demo-app' -}) -@View({ - templateUrl: './demo_app.html', - directives: [MdProgressLinear] -}) -class DemoApp { - progress: number; - - constructor() { - this.progress = 40; - } - - step(s: number) { - this.progress += s; - } -} - -export function main() { - commonDemoSetup(); - bootstrap(DemoApp, [ - bind(UrlResolver).toValue(new DemoUrlResolver()) - ]); -} diff --git a/modules/examples/src/material/progress-linear/index.ts b/modules/examples/src/material/progress-linear/index.ts new file mode 100644 index 000000000000..e6a94a4d415d --- /dev/null +++ b/modules/examples/src/material/progress-linear/index.ts @@ -0,0 +1,24 @@ +import {bootstrap, Component, View} from 'angular2/angular2'; +import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear'; +import {UrlResolver} from 'angular2/src/services/url_resolver'; +import {commonDemoSetup, DemoUrlResolver} from '../demo_common'; +import {bind} from 'angular2/di'; + +@Component({selector: 'demo-app'}) +@View({templateUrl: './demo_app.html', directives: [MdProgressLinear]}) +class DemoApp { + progress: number; + + constructor() { + this.progress = 40; + } + + step(s: number) { + this.progress += s; + } +} + +export function main() { + commonDemoSetup(); + bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]); +} diff --git a/modules/examples/src/material/radio/index.js b/modules/examples/src/material/radio/index.ts similarity index 56% rename from modules/examples/src/material/radio/index.js rename to modules/examples/src/material/radio/index.ts index 6fff5168ebb6..662f59c49993 100644 --- a/modules/examples/src/material/radio/index.js +++ b/modules/examples/src/material/radio/index.ts @@ -1,23 +1,12 @@ -import {bootstrap} from 'angular2/angular2'; -import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button' -import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher' +import {bootstrap, Component, View} from 'angular2/angular2'; +import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button'; +import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher'; import {UrlResolver} from 'angular2/src/services/url_resolver'; import {commonDemoSetup, DemoUrlResolver} from '../demo_common'; import {bind} from 'angular2/di'; -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; - -@Component({ - selector: 'demo-app', - appInjector: [MdRadioDispatcher] -}) -@View({ - templateUrl: './demo_app.html', - directives: [MdRadioGroup, MdRadioButton] -}) +@Component({selector: 'demo-app', appInjector: [MdRadioDispatcher]}) +@View({templateUrl: './demo_app.html', directives: [MdRadioGroup, MdRadioButton]}) class DemoApp { thirdValue; groupValueChangeCount; @@ -48,7 +37,5 @@ class DemoApp { export function main() { commonDemoSetup(); - bootstrap(DemoApp, [ - bind(UrlResolver).toValue(new DemoUrlResolver()) - ]); + bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]); } diff --git a/modules/examples/src/material/switcher/index.js b/modules/examples/src/material/switcher/index.js deleted file mode 100644 index 91e8b9dfd02f..000000000000 --- a/modules/examples/src/material/switcher/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import {bootstrap} from 'angular2/angular2'; -import {MdSwitch} from 'angular2_material/src/components/switcher/switch' -import {UrlResolver} from 'angular2/src/services/url_resolver'; -import {commonDemoSetup, DemoUrlResolver} from '../demo_common'; -import {bind} from 'angular2/di'; - -// TODO(radokirov): Once the application is transpiled by TS instead of Traceur, -// add those imports back into 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; - -@Component({ - selector: 'demo-app' -}) -@View({ - templateUrl: './demo_app.html', - directives: [MdSwitch] -}) -class DemoApp { - toggleCount: number; - - constructor() { - this.toggleCount = 0; - } - - increment() { - this.toggleCount++; - } -} - -export function main() { - commonDemoSetup(); - bootstrap(DemoApp, [ - bind(UrlResolver).toValue(new DemoUrlResolver()) - ]); -} diff --git a/modules/examples/src/material/switcher/index.ts b/modules/examples/src/material/switcher/index.ts new file mode 100644 index 000000000000..88a8ed6e295d --- /dev/null +++ b/modules/examples/src/material/switcher/index.ts @@ -0,0 +1,24 @@ +import {bootstrap, Component, View} from 'angular2/angular2'; +import {MdSwitch} from 'angular2_material/src/components/switcher/switch'; +import {UrlResolver} from 'angular2/src/services/url_resolver'; +import {commonDemoSetup, DemoUrlResolver} from '../demo_common'; +import {bind} from 'angular2/di'; + +@Component({selector: 'demo-app'}) +@View({templateUrl: './demo_app.html', directives: [MdSwitch]}) +class DemoApp { + toggleCount: number; + + constructor() { + this.toggleCount = 0; + } + + increment() { + this.toggleCount++; + } +} + +export function main() { + commonDemoSetup(); + bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]); +}