Radio cleanup, create @IonicDirective

ionic/components/nav/pane.js

@@ -7,7 +7,7 @@ import {bind} from 'angular2/di';
 
 import {ViewController} from '../view/view-controller';
 import {SwipeHandle} from './swipe-handle';
-import {ModeComponent} from '../../config/component';
+import {IonicComponentNEW} from '../../config/component';
 
 
 export class PaneController {
@@ -87,10 +87,7 @@ export class PaneController {
 
 }
 
-@ModeComponent({
-  selector:'ion-pane',
-  classId: 'nav'
-})
+@IonicComponentNEW(Pane)
 @View({
   template: `
     <template pane-anchor></template>
@@ -102,6 +99,14 @@ export class PaneController {
   directives: [PaneAnchor, PaneContentAnchor, SwipeHandle]
 })
 export class Pane {
+
+  static get config() {
+    return {
+      selector:'ion-pane',
+      classId: 'nav'
+    }
+  }
+
   constructor(viewCtrl: ViewController, elementRef: ElementRef) {
     this.domElement = elementRef.domElement;
     viewCtrl.panes.add(this);

ionic/components/radio/radio.js

@@ -1,28 +1,29 @@
 import {ElementRef} from 'angular2/angular2'
-
 import {Component, Directive} 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 {IonicComponent} from 'ionic/config/component'
+//import {ControlGroup, ControlDirective} from 'angular2/forms'
+import {IonicDirective, IonicComponentNEW} from 'ionic/config/component';
 
 
-@Component({
-  selector: 'ion-radio-group'
-})
-@View({
-  template: `<content></content>`
-})
+@IonicDirective(RadioGroup)
 export class RadioGroup {
+
+  static get config() {
+    return {
+      selector: 'ion-radio-group'
+    }
+  }
+
   constructor(
-    elementRef: ElementRef,
-    cd:ControlDirective
+    elementRef: ElementRef//,
+    //cd:ControlDirective
   ) {
     this.domElement = elementRef.domElement
-    this.config = RadioGroup.config.invoke(this)
-    this.controlDirective = cd;
-    cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
+    // this.config = RadioGroup.config.invoke(this)
+    // this.controlDirective = cd;
+    // cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
 
     this.domElement.classList.add('list');
 
@@ -85,17 +86,8 @@ export class RadioGroup {
   }
 }
 
-new IonicComponent(RadioGroup, {})
 
-@Component({
-  selector: 'ion-radio',
-  hostListeners: {
-    '^click': 'buttonClicked($event)'
-  },
-  properties: [
-    'value'
-  ]
-})
+@IonicComponentNEW(RadioButton)
 @View({
   template: `
     <div class="item-content">
@@ -113,12 +105,24 @@ new IonicComponent(RadioGroup, {})
   `
 })
 export class RadioButton {
+
+  static get config() {
+    return {
+      selector: 'ion-radio',
+      hostListeners: {
+        '^click': 'buttonClicked($event)'
+      },
+      properties: [
+        'value'
+      ]
+    }
+  }
+
   constructor(
     @Ancestor() group: RadioGroup,
     elementRef: ElementRef
   ) {
-    this.domElement = elementRef.domElement
-    this.config = RadioButton.config.invoke(this)
+    this.domElement = elementRef.domElement;
 
     this.domElement.classList.add('item')
     this.domElement.setAttribute('aria-checked', true)
@@ -145,7 +149,3 @@ export class RadioButton {
   }
 
 }
-
-new IonicComponent(RadioButton, {
-
-})

ionic/components/radio/test/basic/index.js

@@ -1,22 +1,22 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+//import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 import {RadioGroup, RadioButton, Content, Button, List} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives].concat([RadioGroup, RadioButton, List, Content, Button])
+  directives: [RadioGroup, RadioButton, List, Content, Button]
 })
 export default class IonicApp {
   constructor() {
     console.log('IonicApp Start')
 
-    var fb = new FormBuilder();
-    this.form = fb.group({
-      preferredApple: ['mac', Validators.required],
-    });
+    // var fb = new FormBuilder();
+    // this.form = fb.group({
+    //   preferredApple: ['mac', Validators.required],
+    // });
   }
 }

ionic/config/component.js

@@ -13,82 +13,76 @@ export function Config(instance, config){
   }
 }
 
-export class ModeComponent extends Component {
-  constructor(config) {
-    super( appendModeConfig(config) );
-  }
-}
-
-export class ModeDirective extends Directive {
-  constructor(config) {
-    super( appendModeConfig(config) );
-  }
-}
-
-export class IonicComponentNEW extends ModeComponent {
+export class IonicDirective extends Directive {
   constructor(ComponentType) {
-    let config = ComponentType.config;
-    const defaultProperties = config.defaultProperties;
-
-    config.properties = config.properties || [];
-    config.hostProperties = config.hostProperties || {};
-
-    for (let prop in defaultProperties) {
-      // add the property to the component "properties"
-      config.properties.push(prop);
-
-      // set the component "hostProperties", so the instance's
-      // property value will be used to set the element's attribute
-      config.hostProperties[prop] = 'attr.' + util.pascalCaseToDashCase(prop);
-    }
-
-    // called by the component's onInit when an instance has been created and properties bound
-    ComponentType.applyConfig = (instance) => {
-      for (let prop in defaultProperties) {
-        // Priority:
-        // ---------
-        // 1) Value set from within constructor
-        // 2) Value set from the host element's attribute
-        // 3) Value set by the users global config
-        // 4) Value set by the default mode/platform config
-        // 5) Value set from the component's default
-
-        if (instance[prop]) {
-          // this property has already been set on the instance
-          // could be from the user setting the element's attribute
-          // or from the user setting it within the constructor
-          continue;
-        }
-
-        // get the property values from a global user config
-        var globalPropertyValue = null;
-        if (globalPropertyValue) {
-          instance[prop] = globalPropertyValue;
-          continue;
-        }
-
-        // get the property values provided by this mode/platform
-        var modePropertyValue = null;
-        if (modePropertyValue) {
-          instance[prop] = modePropertyValue;
-          continue;
-        }
-
-        // wasn't set yet, so go with property's default value
-        instance[prop] = defaultProperties[prop];
-      }
-    };
-
-    super(config);
+    super( appendModeConfig(ComponentType) );
   }
 }
 
-function appendModeConfig(config) {
-  config = config || {};
+export class IonicComponentNEW extends Component {
+  constructor(ComponentType) {
+    super( appendModeConfig(ComponentType) );
+  }
+}
+
+function appendModeConfig(ComponentType) {
+  let config = ComponentType.config;
+  const defaultProperties = config.defaultProperties;
+
+  config.properties = config.properties || [];
+  config.hostProperties = config.hostProperties || {};
+
+  for (let prop in defaultProperties) {
+    // add the property to the component "properties"
+    config.properties.push(prop);
+
+    // set the component "hostProperties", so the instance's
+    // property value will be used to set the element's attribute
+    config.hostProperties[prop] = 'attr.' + util.pascalCaseToDashCase(prop);
+  }
+
+  // called by the component's onInit when an instance has been created and properties bound
+  ComponentType.applyConfig = (instance) => {
+    for (let prop in defaultProperties) {
+      // Priority:
+      // ---------
+      // 1) Value set from within constructor
+      // 2) Value set from the host element's attribute
+      // 3) Value set by the users global config
+      // 4) Value set by the default mode/platform config
+      // 5) Value set from the component's default
+
+      if (instance[prop]) {
+        // this property has already been set on the instance
+        // could be from the user setting the element's attribute
+        // or from the user setting it within the constructor
+        continue;
+      }
+
+      // get the property values from a global user config
+      var globalPropertyValue = null;
+      if (globalPropertyValue) {
+        instance[prop] = globalPropertyValue;
+        continue;
+      }
+
+      // get the property values provided by this mode/platform
+      var modePropertyValue = null;
+      if (modePropertyValue) {
+        instance[prop] = modePropertyValue;
+        continue;
+      }
+
+      // wasn't set yet, so go with property's default value
+      instance[prop] = defaultProperties[prop];
+    }
+  };
+
   config.hostAttributes = config.hostAttributes || {};
   let className = (config.hostAttributes['class'] || '');
   let id = config.classId || config.selector.replace('ion-', '');
   config.hostAttributes['class'] = (className + ' ' + id + ' ' + id + '-' + platformMode).trim();
+
   return config;
 }