diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index b244008417..d4b1c3bb89 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -1,9 +1,7 @@
-import {Component, Directive, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2';
-import {Control, NgControl, NgFormControl, ControlGroup, ControlDirective} from 'angular2/angular2';
+import {Directive, Renderer, ElementRef, Host, Optional, NgControl} from 'angular2/angular2';
import {Ion} from '../ion';
import {Config} from '../../config/config';
-import {dom} from 'ionic/util';
/**
* @name Segment
@@ -22,48 +20,56 @@ import {dom} from 'ionic/util';
* Enemies
*
*
+ *
+ *
+ *
* ```
*/
-@Component({
- selector: 'ion-segment',
- inputs: [
- 'value'
- ],
- template: '',
- directives: [forwardRef(() => SegmentButton)]
+@Directive({
+ selector: 'ion-segment'
})
export class Segment extends Ion {
+ buttons: Array = [];
+
/**
* TODO
* @param {NgControl} ngControl TODO
* @param {ElementRef} elementRef TODO
* @param {Config} config TODO
- * @param {Renderer} renderer TODO
*/
constructor(
@Optional() ngControl: NgControl,
elementRef: ElementRef,
- config: Config,
- renderer: Renderer
+ config: Config
) {
super(elementRef, config);
- this.ele = elementRef.nativeElement
- this.elementRef = elementRef;
- this.renderer = renderer;
+ this.onChange = (_) => {};
+ this.onTouched = (_) => {};
- this.change = new EventEmitter('change');
- this.input = new EventEmitter('input');
-
- this.ngControl = ngControl;
-
- this.buttons = [];
+ if (ngControl) ngControl.valueAccessor = this;
}
writeValue(value) {
- this.value = value;
+ this.value = !value ? '' : value;
}
+ registerOnChange(fn) { this.onChange = fn; }
+
+ registerOnTouched(fn) { this.onTouched = fn; }
+
/**
* Called by child SegmentButtons to bind themselves to
* the Segment.
@@ -74,7 +80,7 @@ export class Segment extends Ion {
// If this button is registered and matches our value,
// make sure to select it
- if(this.value == segmentButton.value) {
+ if (this.value == segmentButton.value) {
this.selected(segmentButton);
}
}
@@ -88,7 +94,7 @@ export class Segment extends Ion {
return;
}
this.buttons.forEach(function(button) {
- if(button.value === value) {
+ if (button.value === value) {
button.isActive = true;
}
});
@@ -104,77 +110,11 @@ export class Segment extends Ion {
});
segmentButton.isActive = true;
- if(!this.ngControl) { return; }
-
- setTimeout(() => {
- this.writeValue(segmentButton.value);
-
- this.ngControl.control.updateValue(segmentButton.value);
-
- // Trigger on change
- this.change.next();
- })
+ this.value = segmentButton.value;
+ this.onChange(segmentButton.value);
}
}
-/**
- * TODO
- */
-@Directive({
- selector: 'ion-segment',
- host: {
- '(change)': 'onChange($event.target.value)',
- '(input)': 'onChange($event.target.value)',
- '(blur)': 'onTouched()',
- //'[value]': 'value',
- /*
- '[class.ng-untouched]': 'cd.control?.untouched == true',
- '[class.ng-touched]': 'cd.control?.touched == true',
- '[class.ng-pristine]': 'cd.control?.pristine == true',
- '[class.ng-dirty]': 'cd.control?.dirty == true',
- '[class.ng-valid]': 'cd.control?.valid == true',
- '[class.ng-invalid]': 'cd.control?.valid == false'
- */
- }
-})
-export class SegmentControlValueAccessor {
- /**
- * TODO
- * @param {NgControl} ngControl TODO
- * @param {Renderer} renderer TODO
- * @param {ElementRef} elementRef TODO
- * @param {Segment} segment TODO
- */
- constructor(
- @Optional() ngControl: NgControl,
- renderer: Renderer,
- elementRef: ElementRef,
- segment: Segment
- ) {
- this.onChange = (_) => {};
- this.onTouched = (_) => {};
-
- if(!ngControl) { return; }
-
- this.ngControl = ngControl;
- this.renderer = renderer;
- this.elementRef = elementRef;
- this.segment = segment;
-
- this.ngControl.valueAccessor = this;
- }
-
- writeValue(value) {
- this.value = !value ? '' : value;
-
- this.segment.value = this.value;
- }
-
- registerOnChange(fn) { this.onChange = fn; }
-
- registerOnTouched(fn) { this.onTouched = fn; }
-}
-
/**
* TODO
*/
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index f692f8f488..eb34e622a2 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -31,17 +31,17 @@
Map mode: NgControl
diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts
index a3d0fcc543..968f2cb16f 100644
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -22,7 +22,7 @@ import {Checkbox} from '../components/checkbox/checkbox';
import {Switch} from '../components/switch/switch';
import {TextInput, TextInputElement} from '../components/text-input/text-input';
import {Label} from '../components/text-input/label';
-import {Segment, SegmentButton, SegmentControlValueAccessor} from '../components/segment/segment';
+import {Segment, SegmentButton} from '../components/segment/segment';
import {RadioGroup, RadioButton} from '../components/radio/radio';
import {SearchBar} from '../components/searchbar/searchbar';
import {Nav} from '../components/nav/nav';
@@ -83,7 +83,6 @@ export const IONIC_DIRECTIVES = [
SearchBar,
Segment,
SegmentButton,
- SegmentControlValueAccessor,
Checkbox,
RadioGroup,
RadioButton,