IonicComponent_OLD cleanups

ionic/components/segment/segment.js

@@ -1,35 +1,40 @@
 import {Renderer, ElementRef} from 'angular2/angular2'
 
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {ControlGroup, ControlDirective} from 'angular2/forms'
 import {dom} from 'ionic/util';
-import {IonicComponent_OLD} from 'ionic/config/component'
+import {IonicComponent} from 'ionic/config/component'
 import {Button} from 'ionic/components/button/button'
 
 
-@Component({
-  selector: 'ion-segment',
-  hostListeners: {
-    'click': 'buttonClicked($event)'
-  }
-})
+@IonicComponent(Segment)
 @View({
   template: `<div class="ion-segment">
     <content></content>
   </div>
   `,
-  directives: [Button, SegmentButton],
-  properties: [
-    'value'
-  ],
-  hostProperties: {
-    value: 'value'
-  }
+  directives: [Button, SegmentButton]
 })
 export class Segment {
+
+  static get config() {
+    return {
+      selector: 'ion-segment',
+      hostListeners: {
+        'click': 'buttonClicked($event)'
+      },
+      properties: [
+        'value'
+      ],
+      hostProperties: {
+        value: 'value'
+      }
+    }
+  }
+
   constructor(
     elementRef: ElementRef,
     renderer: Renderer,
@@ -47,6 +52,10 @@ export class Segment {
     this.buttons = [];
   }
 
+  onInit() {
+    Segment.applyConfig(this);
+  }
+
   /**
    * Much like ngModel, this is called from our valueAccessor for the attached
    * ControlDirective to update the value internally.
@@ -103,8 +112,6 @@ export class Segment {
   }
 }
 
-new IonicComponent_OLD(Segment, {
-});
 
 @Component({
   selector: 'ion-segment-button',

ionic/components/slides/slides.js

@@ -2,14 +2,14 @@ import {For, ElementRef, Inject, Parent} from 'angular2/angular2'
 
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {DragGesture} from 'ionic/gestures/drag-gesture';
 import * as util from 'ionic/util';
 
 import {dom} from 'ionic/util'
-import {IonicComponent_OLD} from 'ionic/config/component'
+import {IonicComponent} from 'ionic/config/component'
 
 import {Hammer} from 'ionic/gestures/hammer';
 
@@ -29,19 +29,24 @@ import {Hammer} from 'ionic/gestures/hammer';
  * * TODO: Test mouse support
  * * TODO: Port over mouse handling
  */
-@Component({
-  selector: 'ion-slides',
-  properties: [
-    'loop',
-    'index',
-    'bounce'
-  ]
-})
+@IonicComponent(Slides)
 @View({
   template: `<div class="slides-view"><content></content></div>`,
   directives: [Slide, SlidePager]
 })
 export class Slides {
+
+  static get config() {
+    return {
+      selector: 'ion-slides',
+      properties: [
+        'loop',
+        'index',
+        'bounce'
+      ]
+    }
+  }
+
   constructor(elementRef: ElementRef) {
     // Grab the main container, and the slides-view wrapper
     this.domElement = elementRef.domElement;
@@ -63,17 +68,9 @@ export class Slides {
     // Initialize our slides gesture handler
     this.gesture = new SlidesGesture(this);
     this.gesture.listen();
-
-
-    // Wait a cycle for the children to exist before computing sizes
-    setTimeout(() => {
-      // Continuous mode, but only if we have at least 2 slides
-      this.setup();
-
-    });
   }
 
-  setup() {
+  onInit() {
     this.continuous = util.isDefined(this.loop) && (this.slides.length > 1 ? true : false);
 
     // Grab the wrapper element that contains the slides
@@ -464,15 +461,11 @@ export class Slides {
   }
 
 }
-new IonicComponent_OLD(Slides, {
-});
 
-@Component({
+
+@Directive({
   selector: 'ion-slide',
 })
-@View({
-  template: `<content></content>`
-})
 export class Slide {
   constructor(
     @Ancestor() slides: Slides,
@@ -515,8 +508,6 @@ export class Slide {
   }
 }
 
-new IonicComponent_OLD(Slide, {
-});
 
 @Component({
   selector: 'ion-pager',
@@ -543,13 +534,10 @@ export class SlidePager {
     return this.slides.slides;
   }
 }
-new IonicComponent_OLD(SlidePager, {
-});
 
 
 export class SlidesGesture extends DragGesture {
   constructor(slides) {
-    //util.defaults(opts, {});
     super(slides.domElement);
     this.slides = slides;
   }
@@ -573,7 +561,6 @@ export class SlidesGesture extends DragGesture {
     this.slides._dragStart(event, this._drag);
   }
   onDragEnd(event) {
-
     this.slides._endDrag(event, this._drag);
   }
 }

ionic/components/switch/switch.js

@@ -4,45 +4,37 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {ControlGroup, ControlDirective} from 'angular2/forms'
 import {dom} from 'ionic/util';
-import {IonicComponent_OLD} from 'ionic/config/component'
+import {IonicComponent} from 'ionic/config/component'
 
-@Component({
-  selector: 'ion-switch',
-  properties: {
-    checked: 'checked'
-  },
-  hostListeners: {
-    'click': 'switchClicked($event)'
-  },
-  /*
-  TODO: For some reason this triggers a 'TypeError: array.map is not a function'
-  events: {
-    'click': 'onClick()'
-  }
-  */
-})
+@IonicComponent(Switch)
 @View({
   template: `
   <div class="item-content">
-
     <div class="item-title">
       <content></content>
     </div>
-
     <div class="item-media media-switch">
       <div class="switch-toggle"></div>
     </div>
-
   </div>`
 })
 export class Switch {
+
+  static get config() {
+    return {
+      selector: 'ion-switch',
+      properties: [
+        'checked'
+      ],
+      hostListeners: {
+        'click': 'switchClicked($event)'
+      }
+    }
+  }
+
   constructor(
     elementRef: ElementRef,
     cd: ControlDirective
-    // @PropertySetter('attr.role') setAriaRole: Function,
-    // @PropertySetter('attr.aria-checked') setChecked: Function
-    // @PropertySetter('attr.aria-invalid') setInvalid: Function,
-    // @PropertySetter('attr.aria-disabled') setDisabled: Function
   ) {
     this.domElement = elementRef.domElement
     this.config = Switch.config.invoke(this)
@@ -89,5 +81,3 @@ export class Switch {
     this.checked = !this.checked;
   }
 }
-
-new IonicComponent_OLD(Switch, {})