cargdev/angular
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

chore(material): migrate most components to TypeScript.

Browse Source
This commit is contained in:
Jeremy Elbourn
2015-05-22 13:01:23 -07:00
parent 26d5d17ebe
commit 0f3a8f369a
30 changed files with 487 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
modules/angular2_material/src/components/input/input.js → modules/angular2_material/src/components/input/input.ts
View File

@ -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,77 +7,11 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
// TODO(jelbourn): max-length counter
// TODO(jelbourn): placeholder property
@Directive({
selector: 'md-input-container input',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {
'yes': 'class.md-input'
},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdInput {
value: string;
yes: boolean;
// Events emitted by this directive. We use these special 'md-' events to communicate
// to the parent MdInputContainer.
mdChange: EventEmitter;
mdFocusChange: EventEmitter;
constructor(
@Attribute('value') value: String,
@Parent() container: MdInputContainer) {
// TODO(jelbourn): Remove this when #1402 is done.
this.yes = true;
this.value = value == null ? '' : value;
this.mdChange = new EventEmitter();
this.mdFocusChange = new EventEmitter();
container.registerInput(this);
}
updateValue(event) {
this.value = event.target.value;
ObservableWrapper.callNext(this.mdChange, this.value);
}
setHasFocus(hasFocus: boolean) {
ObservableWrapper.callNext(this.mdFocusChange, hasFocus);
}
}
@Directive({
selector: 'md-input-container textarea',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {
'yes': 'class.md-input'
},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdTextarea extends MdInput {
constructor(
@Attribute('value') value: String,
@Parent() container: MdInputContainer) {
super(value, container);
}
}
@Directive({
selector: 'md-input-container',
lifecycle: [onAllChangesDone],
hostProperties: {
'inputHasValue': 'class.md-input-has-value',
'inputHasFocus': 'class.md-input-focused'
}
hostProperties:
{'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'}
})
export class MdInputContainer {
// The MdInput or MdTextarea inside of this container.
@ -91,7 +23,7 @@ export class MdInputContainer {
// Whether the input inside of this container has focus.
inputHasFocus: boolean;
constructor() {
constructor(@Attribute('id') id: string) {
this._input = null;
this.inputHasValue = false;
this.inputHasFocus = false;
@ -115,12 +47,73 @@ export class MdInputContainer {
// Listen to input changes and focus events so that we can apply the appropriate CSS
// classes based on the input state.
ObservableWrapper.subscribe(input.mdChange, value => {
this.inputHasValue = value != '';
});
ObservableWrapper.subscribe(input.mdChange, value => { this.inputHasValue = value != ''; });
ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {
this.inputHasFocus = hasFocus
});
ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {this.inputHasFocus = hasFocus});
}
}
@Directive({
selector: 'md-input-container input',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {'yes': 'class.md-input'},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdInput {
value: string;
yes: boolean;
// Events emitted by this directive. We use these special 'md-' events to communicate
// to the parent MdInputContainer.
mdChange: EventEmitter;
mdFocusChange: EventEmitter;
constructor(@Attribute('value') value: string, @Parent() container: MdInputContainer,
@Attribute('id') id: string) {
// TODO(jelbourn): Remove this when #1402 is done.
this.yes = true;
this.value = value == null ? '' : value;
this.mdChange = new EventEmitter();
this.mdFocusChange = new EventEmitter();
container.registerInput(this);
}
updateValue(event) {
this.value = event.target.value;
ObservableWrapper.callNext(this.mdChange, this.value);
}
setHasFocus(hasFocus: boolean) {
ObservableWrapper.callNext(this.mdFocusChange, hasFocus);
}
}
/*
@Directive({
selector: 'md-input-container textarea',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {
'yes': 'class.md-input'
},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
'blur': 'setHasFocus(false)'
}
})
export class MdTextarea extends MdInput {
constructor(
@Attribute('value') value: string,
@Parent() container: MdInputContainer,
@Attribute('id') id: string) {
super(value, container, id);
}
}
*/