use IonicComponent

src/components/action-menu/action-menu.js

@@ -1,13 +1,11 @@
 import {NgElement, Component, Template, Parent} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config'
+import {IonicComponent} from 'ionic2/config/component'
 import {Icon} from 'ionic2/components/icon/icon'
 import {Item} from 'ionic2/components/item/item'
 
-export let ActionMenuConfig = new ComponentConfig('action-menu')
 
 @Component({
-  selector: 'ion-action-menu',
-  services: [ActionMenuConfig]
+  selector: 'ion-action-menu'
 })
 @Template({
   inline: `
@@ -41,10 +39,11 @@ export let ActionMenuConfig = new ComponentConfig('action-menu')
 })
 export class ActionMenu {
   constructor(
-    configFactory: ActionMenuConfig,
     @NgElement() ngElement:NgElement
   ) {
     this.domElement = ngElement.domElement
-    this.config = configFactory.create(this)
+    this.config = ActionMenu.config.invoke(this)
   }
 }
+
+new IonicComponent(ActionMenu, {})

src/components/checkbox/checkbox.js

@@ -1,8 +1,6 @@
 import {Component, Template, NgElement, PropertySetter} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config'
 import {IonicComponent} from 'ionic2/config/component'
 
-export let CheckboxConfig = new ComponentConfig('checkbox')
 
 @Component({
   selector: 'ion-checkbox',
@@ -11,8 +9,7 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
   },
   events: {
     '^click': 'onClick()'
-  },
-  services: [CheckboxConfig]
+  }
 })
 @Template({
   inline: `
@@ -31,7 +28,6 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
 })
 export class Checkbox {
   constructor(
-    configFactory: CheckboxConfig,
     @NgElement() ngElement: NgElement,
     @PropertySetter('attr.role') setAriaRole: Function,
     @PropertySetter('attr.aria-checked') setAriaChecked: Function,

src/components/list/list.js

@@ -1,21 +1,20 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config';
+import {IonicComponent} from 'ionic2/config/component'
 
-export let ListConfig = new ComponentConfig('list')
 
 @Component({
-  selector: 'ion-list',
-  services: [ListConfig]
+  selector: 'ion-list'
 })
 @Template({
   inline: `<content></content>`
 })
 export class List {
   constructor(
-    configFactory: ListConfig,
     ngElement: NgElement
   ) {
     this.domElement = ngElement.domElement;
-    configFactory.create(this);
+    this.config = List.config.invoke(this)
   }
 }
+
+new IonicComponent(List, {})

src/components/nav-viewport/nav-viewport.js

@@ -1,5 +1,4 @@
 import {Component, Template, For, NgElement, bind} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config'
 import {NavPane} from 'ionic2/components/nav-pane/nav-pane'
 import * as util from 'ionic2/util'
 

src/components/radio/radio-button.js

@@ -1,11 +1,9 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config';
+import {IonicComponent} from 'ionic2/config/component'
 
-export let RadioConfig = new ComponentConfig('radio');
 
 @Component({
-  selector: 'ion-radio',
-  services: [RadioConfig]
+  selector: 'ion-radio'
 })
 @Template({
   inline: `
@@ -25,13 +23,14 @@ export let RadioConfig = new ComponentConfig('radio');
 })
 export class RadioButton {
   constructor(
-    configFactory: RadioConfig,
     element: NgElement
   ) {
     this.domElement = element.domElement
+    this.config = RadioButton.config.invoke(this)
+
     this.domElement.classList.add('item')
     this.domElement.setAttribute('aria-checked', true)
+  }
+}
 
-    configFactory.create(this)
-  }
-}
+new IonicComponent(RadioButton, {})

src/components/radio/radio-group.js

@@ -1,23 +1,22 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config';
+import {IonicComponent} from 'ionic2/config/component'
 
-export let RadioConfig = new ComponentConfig('radio');
 
 @Component({
-  selector: 'ion-radio-group',
-  services: [RadioConfig]
+  selector: 'ion-radio-group'
 })
 @Template({
   inline: `<content></content>`
 })
 export class RadioGroup {
   constructor(
-    configFactory: RadioConfig,
     element: NgElement
   ) {
     this.domElement = element.domElement
+    this.config = RadioGroup.config.invoke(this)
+
     this.domElement.classList.add('list')
-    this.domElement.classList.add('radio-group')
-    configFactory.create(this)
   }
 }
+
+new IonicComponent(RadioGroup, {})

src/components/search-bar/search-bar.js

@@ -1,33 +1,44 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config';
+import {IonicComponent} from 'ionic2/config/component'
 
-export let SearchBarConfig = new ComponentConfig('search-bar')
 
 @Component({
   selector: 'ion-search-bar',
   bind: {
     cancelText: 'cancel-text',
     placeholderText: 'placeholder-text'
-  },
-  services: [SearchBarConfig]
+  }
 })
 @Template({
   inline: `<div class="search-bar-input-container">
-             <input class="search-bar-input" type="search" [placeholder]="placeholderText">
+             <input class="search-bar-input" type="search" [attr.placeholder]="placeholderText">
            </div>
            <button class="button search-bar-cancel">{{ cancelText }}</button>`
 })
 export class SearchBar {
   constructor(
-    configFactory: SearchBarConfig,
     ngElement: NgElement
   ) {
-    this.domElement = ngElement.domElement;
-    configFactory.create(this);
-
-    // Defaults
-    this.cancelText = this.cancelText || 'Cancel'
-    this.placeholderText = this.placeholderText || 'Search'
+    this.domElement = ngElement.domElement
+    this.config = SearchBar.config.invoke(this)
   }
 }
 
+new IonicComponent(SearchBar, {
+  bind: {
+    cancelText: {
+      defaults: {
+        ios: 'Cancel',
+        android: 'Cancel',
+        core: 'Cancel'
+      }
+    },
+    placeholderText: {
+      defaults: {
+        ios: 'Search',
+        android: 'Search',
+        core: 'Search'
+      }
+    }
+  }
+})

src/components/switch/switch.js

@@ -1,7 +1,6 @@
 import {Component, Template, NgElement, PropertySetter} from 'angular2/angular2'
-import {ComponentConfig} from 'ionic2/config/component-config'
+import {IonicComponent} from 'ionic2/config/component'
 
-export let SwitchConfig = new ComponentConfig('switch')
 
 @Component({
   selector: 'ion-switch',
@@ -10,8 +9,7 @@ export let SwitchConfig = new ComponentConfig('switch')
   },
   events: {
     'click': 'onClick()'
-  },
-  services: [SwitchConfig]
+  }
 })
 @Template({
   inline: `
@@ -29,30 +27,27 @@ export let SwitchConfig = new ComponentConfig('switch')
 })
 export class Switch {
   constructor(
-    configFactory: SwitchConfig,
     element: NgElement,
     @PropertySetter('attr.role') setAriaRole: Function,
-    @PropertySetter('attr.aria-checked') setAriaChecked: Function,
-    @PropertySetter('attr.aria-invalid') setAriaInvalid: Function,
-    @PropertySetter('attr.aria-disabled') setAriaDisabled: Function
+    @PropertySetter('attr.aria-checked') setChecked: Function,
+    @PropertySetter('attr.aria-invalid') setInvalid: Function,
+    @PropertySetter('attr.aria-disabled') setDisabled: Function
   ) {
     this.domElement = element.domElement
+    this.config = Switch.config.invoke(this)
+
     this.domElement.classList.add('item')
-    this.config = configFactory.create(this)
 
     setAriaRole('checkbox')
-    setAriaInvalid('false')
-    setAriaDisabled('false')
+    setInvalid('false')
+    setDisabled('false')
 
-    this.setAriaRole = setAriaRole
-    this.setAriaChecked = setAriaChecked
-    this.setAriaInvalid = setAriaInvalid
-    this.setAriaDisabled = setAriaDisabled
+    this.setChecked = setChecked
   }
 
   set checked(checked) {
     this._checked = checked
-    this.setAriaChecked(checked)
+    this.setChecked(checked)
   }
   get checked() {
     return this._checked
@@ -62,3 +57,4 @@ export class Switch {
   }
 }
 
+new IonicComponent(Switch, {})

src/components/toolbar/toolbar.js

@@ -1,17 +1,14 @@
 import {NgElement, Component, Template, Ancestor} from 'angular2/angular2'
 import {Optional} from 'angular2/src/di/annotations'
 import {BackButton} from 'ionic2/components/toolbar/back-button'
-import {ComponentConfig} from 'ionic2/config/component-config'
+import {IonicComponent} from 'ionic2/config/component'
 import {raf} from 'ionic2/util/dom'
 
-export let ToolbarConfig = new ComponentConfig('toolbar')
-
 @Component({
   selector: 'ion-toolbar',
   bind: {
     title: 'nav-title'
-  },
-  services: [ToolbarConfig]
+  }
 })
 @Template({
   inline: `
@@ -35,12 +32,10 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
 })
 export class Toolbar {
   constructor(
-    @NgElement() ngEle:NgElement,
-    configFactory: ToolbarConfig
+    @NgElement() ngEle:NgElement
   ) {
     this.domElement = ngEle.domElement
-
-    this.config = configFactory.create(this);
+    this.config = Toolbar.config.invoke(this)
 
     // TODO: make more better plz
     setTimeout(() => {
@@ -88,3 +83,5 @@ export class Toolbar {
   }
 
 }
+
+new IonicComponent(Toolbar, {})

src/components/view/view.js

@@ -1,15 +1,13 @@
 import {NgElement, Component, Template, Parent, Ancestor} from 'angular2/angular2'
 import {Toolbar} from 'ionic2/components/toolbar/toolbar'
-import {ComponentConfig} from 'ionic2/config/component-config'
+import {IonicComponent} from 'ionic2/config/component'
 
-export let ViewConfig = new ComponentConfig('view')
 
 @Component({
   selector: 'ion-view',
   bind: {
     title: 'nav-title'
-  },
-  services: [ViewConfig]
+  }
 })
 @Template({
   inline: `
@@ -23,13 +21,12 @@ export let ViewConfig = new ComponentConfig('view')
 })
 export class View {
   constructor(
-    configFactory: ViewConfig,
     @NgElement() ngElement:NgElement
   ) {
     this.domElement = ngElement.domElement
-    this.domElement.classList.add('pane')
-    this.config = configFactory.create(this)
+    this.config = View.config.invoke(this)
 
+    this.domElement.classList.add('pane')
 
 
     /*** TODO: MAKE MORE GOOD!! HACK HACK HACK!!!!!!!!! *****/
@@ -67,3 +64,5 @@ export class View {
 
   }
 }
+
+new IonicComponent(View, {})